CSS でボックスの部分的な境界線を作成するにはどうすればよいですか?

CSS ボックスの部分的な境界線の宣言

特定のセクションにのみ表示される境界線を持つ CSS ボックスを作成すると、視覚的な魅力が向上し、実用性が向上します。 。 CSS では部分的な境界線を明示的に許可していませんが、この効果を適切に実現するための効果的な回避策があります。

部分的な下境界線

境界線のみを表示するボックスの場合下部で、次のスタイルを適用します。

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

div 要素はメイン ボックスを作成し、 div:after 疑似要素は下境界線を追加します。この手法は正常に機能し、追加のマークアップは必要ありません。

複数の部分境界線

同じボックス上に複数の部分境界線を作成するには、border-image プロパティを次のように使用します。スライスされた画像をソースとして使用します。これにより、各境界線セグメントの位置と寸法を指定できます。

div {
  width: 350px;
  height: 100px;
  background: url('image.png') no-repeat;
}

div:after {
  content: '';
  width: 350px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: url('image.png') 60px 350px 5px 60px / 1px 1px;
}

要約すると、CSS は部分的な境界線をネイティブにサポートしていませんが、これらの手法は、適切に機能を低下させ、視覚的なデザインの柔軟性を提供する効果的なソリューションを提供します。魅力的なボックスの境界線の処理。

以上がCSS でボックスの部分的な境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。