css如何實(shí)現(xiàn)豎線

小編給大家分享一下css如何實(shí)現(xiàn)豎線，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

實(shí)現(xiàn)方法：1、利用border-left或border-right屬性實(shí)現(xiàn)；2、使用偽元素來(lái)實(shí)現(xiàn)；3、利用box-shadow屬性實(shí)現(xiàn)；4、利用“filter:drop-shadow()”實(shí)現(xiàn)；5、利用linearGradient漸變實(shí)現(xiàn)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css實(shí)現(xiàn)豎線的方法

html:

<p class="p1">實(shí)現(xiàn)豎線</p>

css:

p{
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }

方法一：使用border-left或者border-right

.p1 {
	border-left: 5px solid red;
	border-right: 5px solid red;
}

效果圖：

方法二：使用偽元素來(lái)實(shí)現(xiàn)

每個(gè)標(biāo)簽都會(huì)有before及after兩個(gè)偽元素，并且我們也經(jīng)常用這類標(biāo)簽做一些Icon之類的小圖標(biāo)。這里我們使用偽元素，也會(huì)很容易來(lái)實(shí)現(xiàn)想要的效果。

.p1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
}

效果圖：

方法三：內(nèi)/外陰影

使用內(nèi)陰影或者外陰影也能實(shí)現(xiàn)此效果，不過(guò)在有些Chrome（比如：Chrome/70.0）版本上會(huì)底部1px兼容性問題，其他瀏覽器沒遇到。

/* 內(nèi)陰影 */
    .p1{
        box-shadow:inset 5px 0px 0 0 red;
    }

/* 外陰影  有些Chrome（比如：Chrome/70.0）版本上會(huì)底部1px兼容性問題，顯示效果如下圖*/
    .p1{
        box-shadow:-5px 0px 0 0 red;
    }

效果圖：

方法四：drop-shadow

CSS3 新增濾鏡 filter 中的其中一個(gè)濾鏡drop-shadow，也可以生成陰影。

.p1{
   filter:drop-shadow(-5px 0 0 red); 
 }

效果圖：

方法五：漸變 linearGradient

.p1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

效果圖：

此外還可以用outline或者滾動(dòng)條的形式來(lái)實(shí)現(xiàn)，但是這兩種的體驗(yàn)效果或者兼容性都不是太好，不推薦使用。

看完了這篇文章，相信你對(duì)“css如何實(shí)現(xiàn)豎線”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！