CSSを使用して制御可能な点線を生成する方法

目的:

以下に示すように点線を生成します

##実装方法

実装方法、複数のスパンを使用して生成する人もいます。小さな点がスパンです。これは問題ありませんが、全体の状態変更はさらに面倒です。制御可能なスパンを生成する方法はありますか?点線?毛織物?

(ビデオ チュートリアルの推奨:

css ビデオ チュートリアル)

破線の生成

水平線の生成

破線の生成は、通常、線形グラデーションの背景サイズによって実現されます。実装コードは次のとおりです:

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height、破線、線形グラデーション、および背景の高さを制御します-size は間隔とステップ サイズを制御します。

垂直線の生成

垂直線は水平線の正反対であり、反転するだけです。

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

推奨チュートリアル:

css クイック スタート

以上がCSSを使用して制御可能な点線を生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。