首頁  >  問答  >  主體

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

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

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

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

PHPzPHPz2766 天前773

全部回覆(7)我來回復

  • 怪我咯

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

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

    http://jsfiddle.net/2drzmzkh/

    使用了一個偽元素 ::before

    回覆
    0
  • PHP中文网

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

    用兩個偽元素絕對定位。 。

    回覆
    0
  • 高洛峰

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

    樓上說的很對,在此補充一小點:用p的偽元素:before 和:after,然後絕對定位到兩邊,IE7及以下不相容,如果你需要兼容低版本的IE,則需要再考慮下。

    回覆
    0
  • PHPz

    PHPz2017-04-17 11:19:44

    左右兩邊的短線可以用p的左邊邊框,邊框的顏色再利用css3的線性漸變linear-gradient可以實現,不過不向下兼容。

    但其實直接在<p class="蓝色"></p>,加上border更好,多個p並沒什麼,相容也較好。

    回覆
    0
  • 怪我咯

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

    要是不相容低版本的IE的話,可以使用:after,:before來控制顯示左右兩邊的邊框,要是得兼容的話,那就像樓上那樣子了,不過這樣子的空白無意義的就偏多了

    回覆
    0
  • 怪我咯

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

    左邊框,右邊框

    回覆
    0
  • 怪我咯

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

    不是一個盒子都有邊框,然後去掉上邊框麼?

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

    回覆
    0
  • 取消回覆