Question

是否可以像这张图片一样通过CSS创建相同的形状？我可以在我的HTML中使用原始图像文件，但我想通过CSS使用相同的形状。我不明白这是怎么做的。我使用过border：before，：after属性，但是不能给出相同的形状。我现在能做什么？

示例 enter image description here

Answer 1

访问此链接，查看所有可能的形状CSS Shapes

圆形

 #circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/ *清洁，但支持略少：使用＆＃34; 50％＆＃34;作为价值* /

用于html 5 cnavas动画波浪

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      h1 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        margin: 0;
        color: #FFF;
        z-index: 10;
        font-family: Helvetica, sans-serif;
      }

      #canvas {
        background-color:#FAFAFA;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;

        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          ctx.fillStyle = (waves[j]);

          var randomLeft            = (Math.sin(offset/100)  + 1)       / 2 * 200;
          var randomRight           = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
          var randomLeftConstraint  = (Math.sin((offset/60)  + 2)  + 1) / 2 * 200;
          var randomRightConstraint = (Math.sin((offset/60)  + 1)  + 1) / 2 * 200;

          ctx.beginPath();
          ctx.moveTo(0, randomLeft + 100);

          // ctx.lineTo(canvas.width, randomRight + 100);
          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
          ctx.lineTo(canvas.width , canvas.height);
          ctx.lineTo(0, canvas.height);
          ctx.lineTo(0, randomLeft + 100);

          ctx.closePath();
          ctx.fill();
        }

        i = i + 3;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>

Answer 2

只需在border-radius上添加前缀就可以了。

#circle { width:100px; height:100px; border-radius:50%; background:#ccc; }

Answer 3

您可以使用以下内容：

<img style="border: 2px solid black;
            border-radius: 30px;
            -moz-border-radius: 30px;
            -khtml-border-radius: 30px;
            -webkit-border-radius: 30px;"
            src="abc.jpg" />

我希望它能奏效。

Answer 4

对于圆形边框，您可以参考以下代码。

html：

<div class="cirlce"></div>

的CSS：

.cirlce {
   width: 300px;
   height: 300px;
   background-color: red;
   border-radius: 150px;
   -moz-border-radius: 150px;
   -webkit-border-radius: 150px;
}

Answer 5

使用CSS，您可以实现您想要的任何形状。

但是，为此你必须合并两个或更多DIVs。

请参阅此参考URL以获取自定义形状。

Custom Shapes

这对您创建自定义形状非常有帮助。

如何通过CSS创建圆角形状

5 个答案: