問題描述：在只使用一個標簽的情況下實現左邊豎線
通用標簽與樣式如下：
html:
<div class="div1">實現左邊豎線</div>
css:
.div1 { width: 200px; height: 50px; line-height:50px; text-align: center; background: #ccc; position: relative; }方法一：使用border
.div1 { border-left: 5px solid red;}
方法二：使用偽元素來實現
每個標簽都會有before及after兩個偽元素，并且我們也經常用這類標簽做一些Icon之類的小圖標。這里我們使用偽元素，也會很容易來實現想要的效果。
.div1::before { content: ""; width: 5px; height:50px; position: absolute; top: 0; left: 0; background: red; }方法三：內/外陰影
使用內陰影或者外陰影也能實現此效果，不過在有些Chrome（比如：Chrome/70.0）版本上會底部1px兼容性問題，其他瀏覽器沒遇到。
/* 內陰影 */ .div1{ box-shadow:inset 5px 0px 0 0 red; } /* 外陰影 有些Chrome（比如：Chrome/70.0）版本上會底部1px兼容性問題，顯示效果如下圖*/ .div1{ box-shadow:-5px 0px 0 0 red; }在Chrome/70.0下顯示效果
方法四：drop-shadow
CSS3 新增濾鏡 filter 中的其中一個濾鏡drop-shadow，也可以生成陰影。
.div1{ filter:drop-shadow(-5px 0 0 red); }方法五：漸變 linearGradient
.div1 { background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px); }此外還可以用outline或者滾動條的形式來實現，但是這兩種的體驗效果或者兼容性都不是太好，不推薦使用。
總結
以上所述是小編給大家介紹的css魔法之左邊豎條的多種實現方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
