canvas 使用css

Canvas是HTML5中新增的元素，它可以通过JavaScript来绘制图形、动画、视频等。但是，我们也可以通过CSS来操作Canvas元素，使其更加符合我们的设计和样式要求。

canvas {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  Box-shadow: 2px 2px 5px rgba(0,0.3);
}

通过CSS设置Canvas元素的样式，例如设置背景颜色、边框、边框圆角、阴影等。这些样式可以与JavaScript绘制的图形等结合使用，进一步美化我们的应用界面。

canvas::before {
  content:' ';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-size: contain;
  opacity: 0.5;
  z-index: -1;
}

Canvas元素的背景也可以使用CSS中的背景属性设置，比如使用图片作为背景。不同于普通元素，Canvas的背景图片需要通过伪元素在Canvas上面生成，尤其是当Canvas元素本身没有内容时，这个方法可以很好地补充空白。

总之，CSS为Canvas元素提供了更多样式和呈现方式，让我们可以更加灵活地定制Web应用界面的效果。