图片的蓝线我想到的是单独用p写。
<p>abacedfg</p>
<p class="蓝线"></p>
我想直接在<p>abacedfg</p>
这个p直接画出这样的线,这样少了一个p标签了。不知道css有没有技巧能画出这样两边有短线。
高洛峰2017-04-17 11:19:44
樓上說的很對,在此補充一小點:用p的偽元素:before 和:after,然後絕對定位到兩邊,IE7及以下不相容,如果你需要兼容低版本的IE,則需要再考慮下。
PHPz2017-04-17 11:19:44
左右兩邊的短線可以用p的左邊邊框,邊框的顏色再利用css3的線性漸變linear-gradient
可以實現,不過不向下兼容。
但其實直接在<p class="蓝色"></p>
,加上border
更好,多個p並沒什麼,相容也較好。
怪我咯2017-04-17 11:19:44
要是不相容低版本的IE的話,可以使用:after,:before來控制顯示左右兩邊的邊框,要是得兼容的話,那就像樓上那樣子了,不過這樣子的空白無意義的就偏多了
怪我咯2017-04-17 11:19:44
不是一個盒子都有邊框,然後去掉上邊框麼?
css
p { border: 2px solid blue; border-top: none; width: 100%; height: 2px; overflow: hidden; }