html - 這種圖形如何用css3寫

Question

( www.sf.gg ) 是中國領先的開發者技術社群。我們希望為程式設計愛好者提供一個純粹、高品質的技術交流的平台， 與開發者一起學習、交流與成長，創造屬於開發者的時代！

为情所困 · Answer

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

PHP中文网 · Answer

巴扎黑 · Answer

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

習慣沉默 · Answer

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

我又修改了下面的連結。

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

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

DEMO-New

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

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

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

DEMO

php8，我來也