CSSを使用してテキスト装飾の長さと位置をカスタマイズするにはどうすればよいですか?

テキスト装飾の長さと位置のカスタマイズ

スタイリッシュなテキスト装飾を追求する中で、下線をさまざまに変更して視覚的に興味深いものにしたいと考えています。その長さと位置。単純そうに見えるかもしれませんが、CSS にはいくつかの課題があります。

長さの調整

下線の長さを変更するには、background-size プロパティを利用します。下線の幅と高さの 2 つの値を受け入れます。これらの値を調整することで、線の長さを制御できます。

位置の変更

下線の位置を変更するには、background-position プロパティを変更します。このプロパティは、X 軸 (左右) および Y 軸 (上下) に沿った下線の開始点を指定します。これらの値を調整することで、下線を上、下、または横に移動できます。

柔軟性を高めるグラデーション

下線の装飾にグラデーションを使用すると、柔軟性が高まります。そしてコントロール。実線とは異なり、グラデーションを使用すると、サイズと位置を簡単にカスタマイズできます。

サンプル コード

カスタマイズ オプションを示す例は次のとおりです。

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust for position */
  background-size: 80% 2px; /* Adjust for length */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Affects position as well */
}

バリエーションのある追加クラス:

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

これらのクラスを使用すると、さまざまな長さと位置の組み合わせを簡単に実装し、ユニークで人目を引くテキスト効果を作成できます。

以上がCSSを使用してテキスト装飾の長さと位置をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。