84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
css3里面有个名为倒角的干活
<!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>
简单来讲,你需要通过 圆形p元素的border-radius 和 包裹的overflow来实现,至于更深的橘色应该是阴影
真是不好意思,我一直用的firefox,没想到它对于radial-gradient和chrome还是有不同的。也是我自己理解不够。
radial-gradient
我又修改了下面的链接。
===============
使用了CSS3变量来控制半径大小,暂时想不到更简单的办法了在不向下不兼容的路上越走越远...
DEMO-New
===================================
详细请看DEMO,纯CSS3实现,没有添加额外标记,虽然我感觉可扩展性不高,不过继续改善应该还是可以投入生产中的。
CSS3的魔法还有很多,不断地深入思考,会想到很多有趣的功能。正如《CSS揭秘》作者那样。
DEMO
css3里面有个名为倒角的干活
简单来讲,你需要通过 圆形p元素的border-radius 和 包裹的overflow来实现,至于更深的橘色应该是阴影
真是不好意思,我一直用的firefox,没想到它对于
radial-gradient
和chrome还是有不同的。也是我自己理解不够。我又修改了下面的链接。
===============
使用了CSS3变量来控制半径大小,暂时想不到更简单的办法了
在不向下不兼容的路上越走越远...
DEMO-New
===================================
详细请看DEMO,纯CSS3实现,没有添加额外标记,虽然我感觉可扩展性不高,不过继续改善应该还是可以投入生产中的。
CSS3的魔法还有很多,不断地深入思考,会想到很多有趣的功能。正如《CSS揭秘》作者那样。
DEMO