文章詳情頁
css - 一條線兩邊有短線的樣式表怎么寫?
瀏覽:198日期:2023-07-27 13:36:31
問題描述
圖片的藍線我想到的是單獨用p寫。
<p>abacedfg</p><p class='藍線'></p>
我想直接在<p>abacedfg</p>這個p直接畫出這樣的線,這樣少了一個p標簽了。不知道css有沒有技巧能畫出這樣兩邊有短線。
問題解答
回答1:直接上答案,一個<p>就可以做好:
http://jsfiddle.net/2drzmzkh/
使用了一個偽元素 ::before。
回答2:用兩個偽元素絕對定位。。
回答3:樓上說的很對,在此補充一小點:用p的偽元素:before 和 :after,然后絕對定位到兩邊,IE7及以下不兼容,如果你需要兼容低版本的IE,則需要再考慮下。
回答4:左右兩邊的短線可以用p的左邊邊框,邊框的顏色再利用css3的線性漸變linear-gradient可以實現,不過不向下兼容。
但其實直接在<p class='藍色'></p>,加上border更好,多個p并沒什么,兼容也較好。
回答5:要是不兼容低版本的IE的話,可以使用:after,:before來控制顯示左右兩邊的邊框,要是得兼容的話,那就像樓上那樣子了,不過這樣子的空白無意義的就偏多了
回答6:border-left,border-right
回答7:難道不是一個盒子都有邊框,然后去掉上邊框么?
cssp { border: 2px solid blue; border-top: none; width: 100%; height: 2px; overflow: hidden;}
標簽:
CSS
相關文章:
1. javascript - 深夜被問題困擾求解惑,rn的API之PermissionsAndroidd的問題2. mysql - 我的myeclipse一直連顯示數據庫連接失敗,不知道為什么3. javascript - 最近用echarts做統計圖時遇到兩個問題!!4. html - radio的使用時如何避免整個頁面只能選一個的情況5. docker綁定了nginx端口 外部訪問不到6. 前端 - html5 audio不能播放7. java - Activity 進入后臺再次傳值?8. mysqld無法關閉9. 利用百度地圖API定位及附件商家信息服務10. git - webstorm窗口中左側列表的文件名顏色怎么修改
排行榜

網公網安備