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來實現,至于更深的橘色應該是陰影
回答4:真是不好意思,我一直用的firefox,沒想到它對于radial-gradient和chrome還是有不同的。也是我自己理解不夠。
我又修改了下面的鏈接。
===============
使用了CSS3變量來控制半徑大小,暫時想不到更簡單的辦法了在不向下不兼容的路上越走越遠...
DEMO-New
===================================
詳細請看DEMO,純CSS3實現,沒有添加額外標記,雖然我感覺可擴展性不高,不過繼續改善應該還是可以投入生產中的。
CSS3的魔法還有很多,不斷地深入思考,會想到很多有趣的功能。正如《CSS揭秘》作者那樣。
DEMO
相關文章:
1. node.js - mysql如何通過knex查詢今天和七天內的匯總數據2. mysql 插入數值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區別???4. Python從URL中提取域名5. mysql - 百萬行的表中是否盡量避免使用update等sql語句?6. python - 在使用Pycharm時經常看到如下的樣式,小括號里紅色的部分是什么意思呢?7. javascript - 新浪微博網頁版的字數限制是怎么做的8. 怎么在網頁中設置圖片進行左右滑動9. javascript - 豆瓣的這個自適應是怎么做的?10. javascript - 用jsonp抓取qq音樂總是說回調函數沒有定義
