css魔法——左邊豎條的實現方法

問題描述：在只使用一個標籤的狀況下實現左邊豎線

通用標籤與樣式以下：
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或者滾動條的形式來實現，可是這兩種的體驗效果或者兼容性都不是太好，不推薦使用。