CSS3 border凹陷該如何編寫？
問題描述
本人新手，請問各位大神，如此，該如何編寫CSS3 ？ （我說的是藍色的部分） 謝謝了~~
問題解答
回答1：我的思路：絕對定位+after/before偽類實現,大致實現的效果如下：
TZ可以參見給的demo自行修改一下：在線demo
回答2：如果換個思路的話，可以把那個圓的margin設置成背景色，然后蓋住右側，這樣看上去就像是凹進去的效果了。
回答3：首先更正一下一樓的答案，after/before是偽元素而不是偽類，這個很重要，不能把這個弄混淆了，如果是我我會用一個大圓覆蓋長條，再用小圓覆蓋大圓就好了
回答4：<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'><head> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'> <title>css</title></head><body><style>#a { width: 150px; height: 300px; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 20px 24px 22px 20px;}#b { display: block; background: radial-gradient(circle at top left, transparent 15px, red 0) top left, radial-gradient(circle at top right, transparent 15px, red 0) top right, radial-gradient(circle at bottom right, transparent 15px, red 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, red 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; width:100%; height: 100%; padding: 2px;}#b:before { content: ''; width: 100%; height: 100%; display: block; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}</style> <p id='a'><p id='b'></p> </p></body></html>
相關文章：
1. windows誤人子弟啊2. 冒昧問一下，我這php代碼哪里出錯了？？？3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. python - linux怎么在每天的凌晨2點執行一次這個log.py文件5. 數據庫 - Mysql的存儲過程真的是個坑！求助下面的存儲過程哪里錯啦，實在是找不到哪里的問題了。6. 實現bing搜索工具urlAPI提交7. mysql優化 - MySQL如何為配置表建立索引？8. 如何用筆記本上的apache做微信開發的服務器9. 我在網址中輸入localhost/abc.php顯示的是not found是為什么呢？10. 關于mysql聯合查詢一對多的顯示結果問題
網公網安備