Heim > Fragen und Antworten > Hauptteil
图片的蓝线我想到的是单独用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; }