html - 這種圖形如何用css3寫

Question

##

Answer 1

css3裡面有個名為倒角的干活

Answer 2

雷雷

Answer 3

簡單來講，你需要透過 圓形p元素的border-radius 和 包裹的overflow來實現，至於更深的橘色應該是陰影

Answer 4

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

我又修改了下面的連結。

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

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

DEMO-New

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

詳細請看DEMO，純CSS3實現，沒有添加額外標記，雖然我感覺可擴展性不高，不過繼續改善應該還是可以投入生產中的。

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

DEMO