这种图形如何用css3写

真是不好意思，我一直用的firefox，没想到它对于radial-gradient和chrome还是有不同的。也是我自己理解不够。

我又修改了下面的链接。

===============

使用了CSS3变量来控制半径大小，暂时想不到更简单的办法了
在不向下不兼容的路上越走越远...

DEMO-New

===================================

详细请看DEMO，纯CSS3实现，没有添加额外标记，虽然我感觉可扩展性不高，不过继续改善应该还是可以投入生产中的。

CSS3的魔法还有很多，不断地深入思考，会想到很多有趣的功能。正如《CSS揭秘》作者那样。

css3里面有个名为倒角的干活

jiahenannan

3825

发布于
2017-05-19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
 *,body{ margin: 0; padding: 0; background: #fff; border: none; }
 .bg{width: 500px; height: 500px; background: rgba(253,181,43,1); padding: 12px; }
 .bg .write_box{ width: 500px; height: 250px; position: relative;background: #fff; overflow: hidden; }
 .bg .write_box .round{ width: 40px; height: 40px; background: rgba(253,181,43,1); position:absolute;  border-radius: 100% }
 .bg .write_box .lft{ left: -20px;   }
 .bg .write_box .rgh{ right: -20px; }
 .bg .write_box .botm{ bottom: -20px; }
 .bg .write_box .tp{ top: -20px; }
</style> 
    
    <div class="bg">
      <div class="write_box">
         <div class="round lft tp"></div>
         <div class="round rgh tp"></div>
         <div class="round lft botm"></div>
         <div class="round rgh botm"></div>
      </div>
      
      <div class="write_box">
         <div class="round lft tp"></div>
         <div class="round rgh tp"></div>
         <div class="round lft botm"></div>
         <div class="round rgh botm"></div>
      </div>
    </div>
</body>
</html>

孤月

2.9k1314

发布于
2017-05-19

简单来讲，你需要通过圆形div元素的border-radius 和包裹的overflow来实现，至于更深的橘色应该是阴影

这种图形如何用css3写

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

这种图形如何用css3写

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？