文章詳情頁(yè)

CSS3 border凹陷該如何編寫(xiě)？

瀏覽：184日期：2023-07-30 13:13:11

問(wèn)題描述

本人新手，請(qǐng)問(wèn)各位大神，如此，該如何編寫(xiě)CSS3 ？（我說(shuō)的是藍(lán)色的部分）謝謝了~~

問(wèn)題解答

回答1：

我的思路：絕對(duì)定位+after/before偽類(lèi)實(shí)現(xiàn),大致實(shí)現(xiàn)的效果如下： CSS3 border凹陷該如何編寫(xiě)？

TZ可以參見(jiàn)給的demo自行修改一下：在線demo

回答2：

如果換個(gè)思路的話(huà)，可以把那個(gè)圓的margin設(shè)置成背景色，然后蓋住右側(cè)，這樣看上去就像是凹進(jìn)去的效果了。

回答3：

首先更正一下一樓的答案，after/before是偽元素而不是偽類(lèi)，這個(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>

CSS

上一條：css3 - 自己做的CSS網(wǎng)格系統(tǒng)里面為什么兩個(gè)div不能同行？下一條：css3動(dòng)畫(huà) - css3 traget切換問(wèn)題

相關(guān)文章：

1. boot2docker無(wú)法啟動(dòng)2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. docker-compose中volumes的問(wèn)題4. java - SSH框架中寫(xiě)分頁(yè)時(shí)service層中不能注入分頁(yè)類(lèi)5. nignx - docker內(nèi)nginx 80端口被占用6. javascript - mock.js可以存儲(chǔ)數(shù)據(jù)嗎7. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.8. dockerfile - 為什么docker容器啟動(dòng)不了？9. golang - 用IDE看docker源碼時(shí)的小問(wèn)題

排行榜

					
					boot2docker無(wú)法啟動(dòng)
					1. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””
					2. docker-compose中volumes的問(wèn)題
					3. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.
					4. javascript - mock.js可以存儲(chǔ)數(shù)據(jù)嗎
					5. nignx - docker內(nèi)nginx 80端口被占用
					6. java - SSH框架中寫(xiě)分頁(yè)時(shí)service層中不能注入分頁(yè)類(lèi)
					7. node.js - antdesign怎么集合react-redux對(duì)input控件進(jìn)行初始化賦值
					8. 關(guān)于docker下的nginx壓力測(cè)試
					9. docker容器呢SSH為什么連不通呢？
					10. 
			熱門(mén)標(biāo)簽

					
					PHP

					JavaScript

					HTML

					CSS

					java

					vue

					數(shù)據(jù)庫(kù)

					微信

					百度

					

<span id="yu2wx"></span>

午夜剧场伦理_日本一道高清_国产又黄又硬_91黄色网战_女同久久另类69精品国产_妹妹的朋友在线

CSS3 border凹陷該如何編寫(xiě)？