成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

html - 這種圖形如何用css3寫

瀏覽：140日期：2023-06-19 11:39:13

問題描述

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來實現(xiàn)，至于更深的橘色應(yīng)該是陰影

回答4：

真是不好意思，我一直用的firefox，沒想到它對于radial-gradient和chrome還是有不同的。也是我自己理解不夠。

我又修改了下面的鏈接。

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

使用了CSS3變量來控制半徑大小，暫時想不到更簡單的辦法了在不向下不兼容的路上越走越遠...

DEMO-New

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

詳細請看DEMO，純CSS3實現(xiàn)，沒有添加額外標記，雖然我感覺可擴展性不高，不過繼續(xù)改善應(yīng)該還是可以投入生產(chǎn)中的。

CSS3的魔法還有很多，不斷地深入思考，會想到很多有趣的功能。正如《CSS揭秘》作者那樣。

DEMO

標簽： HTML
相關(guān)文章：