html - 这种图形如何用css3写
问题描述
问题解答
回答1:css3里面有个名为倒角的干活
回答2:<!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> <p class='bg'> <p class='write_box'> <p class='round lft tp'></p> <p class='round rgh tp'></p> <p class='round lft botm'></p> <p class='round rgh botm'></p> </p> <p class='write_box'> <p class='round lft tp'></p> <p class='round rgh tp'></p> <p class='round lft botm'></p> <p class='round rgh botm'></p> </p> </p></body></html>回答3:
简单来讲,你需要通过 圆形p元素的border-radius 和 包裹的overflow来实现,至于更深的橘色应该是阴影
回答4:真是不好意思,我一直用的firefox,没想到它对于radial-gradient和chrome还是有不同的。也是我自己理解不够。
我又修改了下面的链接。
===============
使用了CSS3变量来控制半径大小,暂时想不到更简单的办法了在不向下不兼容的路上越走越远...
DEMO-New
===================================
详细请看DEMO,纯CSS3实现,没有添加额外标记,虽然我感觉可扩展性不高,不过继续改善应该还是可以投入生产中的。
CSS3的魔法还有很多,不断地深入思考,会想到很多有趣的功能。正如《CSS揭秘》作者那样。
DEMO
相关文章:
1. docker - 如何修改运行中容器的配置2. docker安装后出现Cannot connect to the Docker daemon.3. 网页爬虫 - Python:爬虫的中文编码问题?4. javascript - 修改表单多选项时和后台同事配合的问题。5. ubuntu 远程管理KVM设置问题6. javascript - H5页面怎么查看console信息?7. javascript - vue生成一维码?求助!!!!!急8. css - 手机页面在安卓和苹果浏览器显示不同的小小问题9. javascript - 关于Js中 this的一道题10. angular.js - angularjs如何动态改变ng-model值,在controller中获取input中输入的值并组合post发送到后台
