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

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

創(chuàng)新互聯(lián)建站專注于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營(yíng)銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

實(shí)現(xiàn)方法：1、利用border-left或border-right屬性實(shí)現(xiàn)；2、使用偽元素來實(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;
}

效果圖：

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

每個(gè)標(biāo)簽都會(huì)有before及after兩個(gè)偽元素，并且我們也經(jīng)常用這類標(biāo)簽做一些Icon之類的小圖標(biāo)。這里我們使用偽元素，也會(huì)很容易來實(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)此效果，不過在有些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)條的形式來實(shí)現(xiàn)，但是這兩種的體驗(yàn)效果或者兼容性都不是太好，不推薦使用。

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

新聞標(biāo)題：css如何實(shí)現(xiàn)豎線
標(biāo)題來源：http://muchs.cn/article38/ghjipp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、云服務(wù)器、標(biāo)簽優(yōu)化、定制網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)