css - 一條線兩邊有短線的樣式表怎么寫?
問(wèn)題描述
圖片的藍(lán)線我想到的是單獨(dú)用p寫。
<p>abacedfg</p><p class='藍(lán)線'></p>
我想直接在<p>abacedfg</p>這個(gè)p直接畫出這樣的線,這樣少了一個(gè)p標(biāo)簽了。不知道css有沒(méi)有技巧能畫出這樣兩邊有短線。
問(wèn)題解答
回答1:直接上答案,一個(gè)<p>就可以做好:
http://jsfiddle.net/2drzmzkh/
使用了一個(gè)偽元素 ::before。
回答2:用兩個(gè)偽元素絕對(duì)定位。。
回答3:樓上說(shuō)的很對(duì),在此補(bǔ)充一小點(diǎn):用p的偽元素:before 和 :after,然后絕對(duì)定位到兩邊,IE7及以下不兼容,如果你需要兼容低版本的IE,則需要再考慮下。
回答4:左右兩邊的短線可以用p的左邊邊框,邊框的顏色再利用css3的線性漸變linear-gradient可以實(shí)現(xiàn),不過(guò)不向下兼容。
但其實(shí)直接在<p class='藍(lán)色'></p>,加上border更好,多個(gè)p并沒(méi)什么,兼容也較好。
回答5:要是不兼容低版本的IE的話,可以使用:after,:before來(lái)控制顯示左右兩邊的邊框,要是得兼容的話,那就像樓上那樣子了,不過(guò)這樣子的空白無(wú)意義的就偏多了
回答6:border-left,border-right
回答7:難道不是一個(gè)盒子都有邊框,然后去掉上邊框么?
cssp { border: 2px solid blue; border-top: none; width: 100%; height: 2px; overflow: hidden;}
相關(guān)文章:
1. windows誤人子弟啊2. php傳對(duì)應(yīng)的id值為什么傳不了啊有木有大神會(huì)的看我下方截圖3. 如何用筆記本上的apache做微信開(kāi)發(fā)的服務(wù)器4. python - linux 下用wsgifunc 運(yùn)行web.py該如何修改代碼5. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問(wèn)題6. 實(shí)現(xiàn)bing搜索工具urlAPI提交7. 冒昧問(wèn)一下,我這php代碼哪里出錯(cuò)了???8. mysql優(yōu)化 - MySQL如何為配置表建立索引?9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑!求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦,實(shí)在是找不到哪里的問(wèn)題了。
