CSS3 border凹陷該如何編寫？
問(wèn)題描述
本人新手，請(qǐng)問(wèn)各位大神，如此，該如何編寫CSS3 ？ （我說(shuō)的是藍(lán)色的部分） 謝謝了~~
問(wèn)題解答
回答1：我的思路：絕對(duì)定位+after/before偽類實(shí)現(xiàn),大致實(shí)現(xiàn)的效果如下：
TZ可以參見(jiàn)給的demo自行修改一下：在線demo
回答2：如果換個(gè)思路的話，可以把那個(gè)圓的margin設(shè)置成背景色，然后蓋住右側(cè)，這樣看上去就像是凹進(jìn)去的效果了。
回答3：首先更正一下一樓的答案，after/before是偽元素而不是偽類，這個(gè)很重要，不能把這個(gè)弄混淆了，如果是我我會(huì)用一個(gè)大圓覆蓋長(zhǎng)條，再用小圓覆蓋大圓就好了
回答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>
相關(guān)文章：
1. html - 移動(dòng)端radio無(wú)法選中2. apache - 怎么給localhost后面默認(rèn)加上8080端口3. html5 - datatables 加載不出來(lái)數(shù)據(jù)。4. mysql - 數(shù)據(jù)庫(kù)JOIN查詢5. 我設(shè)置的背景怎么顯示不出來(lái)6. 關(guān)于Navicat連接到mysql，我改了root的密碼后，Navicat連接報(bào)錯(cuò)1862？7. php7.3.4中怎么開(kāi)啟pdo驅(qū)動(dòng)8. python - 用scrapy-splash爬取網(wǎng)站 為啥iframe下的內(nèi)容沒(méi)有被返回9. mysql - 數(shù)據(jù)庫(kù)建字段，默認(rèn)值空和empty string有什么區(qū)別 11010. windows-7 - Win7中Vmware Workstatoin與Xampp中Apache服務(wù)器端口沖突？
網(wǎng)公網(wǎng)安備