html - 這種圖形如何用css3寫
問(wèn)題描述
問(wèn)題解答
回答1：css3里面有個(gè)名為倒角的干活
回答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：
簡(jiǎn)單來(lái)講，你需要通過(guò) 圓形p元素的border-radius 和 包裹的overflow來(lái)實(shí)現(xiàn)，至于更深的橘色應(yīng)該是陰影
回答4：真是不好意思，我一直用的firefox，沒想到它對(duì)于radial-gradient和chrome還是有不同的。也是我自己理解不夠。
我又修改了下面的鏈接。
===============
使用了CSS3變量來(lái)控制半徑大小，暫時(shí)想不到更簡(jiǎn)單的辦法了在不向下不兼容的路上越走越遠(yuǎn)...
DEMO-New
===================================
詳細(xì)請(qǐng)看DEMO，純CSS3實(shí)現(xiàn)，沒有添加額外標(biāo)記，雖然我感覺可擴(kuò)展性不高，不過(guò)繼續(xù)改善應(yīng)該還是可以投入生產(chǎn)中的。
CSS3的魔法還有很多，不斷地深入思考，會(huì)想到很多有趣的功能。正如《CSS揭秘》作者那樣。
DEMO
相關(guān)文章：
1. ddos - apache日志很多其它網(wǎng)址，什么情況？2. 老師 我是一個(gè)沒有學(xué)過(guò)php語(yǔ)言的準(zhǔn)畢業(yè)生 我希望您能幫我一下3. index.php錯(cuò)誤，求指點(diǎn)4. nginx 504 Gateway Time-out 請(qǐng)問(wèn)如何設(shè)置5. PHP類中的$this6. 在cmd下進(jìn)入mysql數(shù)據(jù)庫(kù)，可以輸入中文，但是查看表信息，不顯示中文，是怎么回事，怎新手，請(qǐng)老師7. 導(dǎo)入數(shù)據(jù)庫(kù)不成功8. PHP單例模式9. php自學(xué)從哪里開始？10. Thinkphp 下載地址找不到了？
網(wǎng)公網(wǎng)安備