Heim  >  Fragen und Antworten  >  Hauptteil

css - 一条线两边有短线的样式表怎么写?

图片的蓝线我想到的是单独用p写。

<p>abacedfg</p>
<p class="蓝线"></p>

我想直接在<p>abacedfg</p>这个p直接画出这样的线,这样少了一个p标签了。不知道css有没有技巧能画出这样两边有短线。

PHPzPHPz2764 Tage vor772

Antworte allen(7)Ich werde antworten

  • 怪我咯

    怪我咯2017-04-17 11:19:44

    直接上答案,一个<p>就可以做好:

    http://jsfiddle.net/2drzmzkh/

    使用了一个伪元素 ::before

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-17 11:19:44

    用两个伪元素绝对定位。。

    Antwort
    0
  • 高洛峰

    高洛峰2017-04-17 11:19:44

    楼上说的很对,在此补充一小点:用p的伪元素:before 和 :after,然后绝对定位到两边,IE7及以下不兼容,如果你需要兼容低版本的IE,则需要再考虑下。

    Antwort
    0
  • PHPz

    PHPz2017-04-17 11:19:44

    左右两边的短线可以用p的左边边框,边框的颜色再利用css3的线性渐变linear-gradient可以实现,不过不向下兼容。

    但其实直接在<p class="蓝色"></p>,加上border更好,多个p并没什么,兼容也较好。

    Antwort
    0
  • 怪我咯

    怪我咯2017-04-17 11:19:44

    要是不兼容低版本的IE的话,可以使用:after,:before来控制显示左右两边的边框,要是得兼容的话,那就像楼上那样子了,不过这样子的空白无意义的就偏多了

    Antwort
    0
  • 怪我咯

    怪我咯2017-04-17 11:19:44

    border-left,border-right

    Antwort
    0
  • 怪我咯

    怪我咯2017-04-17 11:19:44

    难道不是一个盒子都有边框,然后去掉上边框么?

    cssp {
      border: 2px solid blue;
      border-top: none;
      width: 100%;
      height: 2px;
      overflow: hidden;
    }
    

    Antwort
    0
  • StornierenAntwort