戦闘にフロントエンドの開発を取得：垂直バーのCSS実装の左側に

問題の説明：

次のように左側の縦は、タグの場合にのみ、ユニバーサルタグのスタイルを実現しました：

左側の垂直バーを達成

HTML：

<div>实现左边竖线</div>

CSS：

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

方法の一つ：境界線を使用します

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

方法2：擬似要素を用いては達成され

各タグは、2つの擬似要素の前と後になります、と私たちはしばしば、このようなラベルの付いたような小さなアイコンアイコンの一部を行います。ここでは、擬似要素を使用し、所望の効果を達成するために非常に簡単になります。

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

方法3：内側/外側の影

この効果を達成することができ、内側の影や外側の影を使用しますが、一部のChromeで：1pxの互換性の問題は、他のブラウザでは、一番下になりますバージョン（クロム/ 70.0のように）発生しませんでした。

/* 内阴影 */
    .div1{
        box-shadow:inset 5px 0px 0 0 red;
    }

/* 外阴影  有些Chrome（比如：Chrome/70.0）版本上会底部1px兼容性问题，显示效果如下图*/
    .div1{
        box-shadow:-5px 0px 0 0 red;
    }

方法4：ドロップシャドウ

フィルタ内のフィルタ、影が生成されてもよい、請求CSS3ドロップシャドウフィルタを追加しました。  

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

方法5：勾配てLinearGradient

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

また、あなたが達成するために、スクロールバーやアウトライン形式を使用することができますが、これらの二つの効果や互換性の経験はお勧めしません、非常に良いではありません。