CSS 背景と境界
CSS 背景と境界モジュールでは、境界、角の丸み、ボックスシャドウを要素に追加します。
さまざまな種類の境界スタイルを追加することができます。ラスター画像から CSS グラデーションまで、どのような種類の画像でも境界を記載することができます。境界は角形または丸めることができ、それぞれの角には異なる半径を設定することができます。要素は、境界があってもなくても丸めることができます。
ボックスシャドウには、内側の影も外側の影も、単一の影も複数の影も、明瞭なものもあれば透明へフェードするものもあります。外側の box-shadow は、要素の境界ボックスが不透明であるかのように影を落とします。内側の box-shadow は、パディング境界の外側がすべて不透明であるかのように影を落とします。影は明瞭にするか、影の色が透明へ遷移する拡散距離を含めることができます。
このモジュールのプロパティは、 <table>
内のセルが共有境界を持つべきか別個の境界を持つべきかを定義することもできます。
背景、境界、ボックスシャドウの動き
この境界、背景、ボックスシャドウの例は、線形および放射グラデーションで作られた中央の背景画像で構成されています。一連のボックスシャドウが、境界を「ポップ」に見せています。左の要素には境界画像が設定されています。右の要素には丸い点線の境界があります。
背景画像は background-image
で定義されています。画像は background-position
で中央に配置されています。複数の背景画像に対して別々の background-clip
プロパティの値を使用して、背景画像がコンテンツボックス内に収まるようにしています。背景色は、 border-image
および点線
の border
の透明部分から背景が現れるのを防ぐために、パディングボックスでクリップしています。右の要素の角丸は border-radius
プロパティを使用して作成しています。単一の box-shadow
宣言を使用して、内側と外側のすべての影を設定しています。
この例のコードを見るには、 GitHub でソースを表示してください。
リファレンス
プロパティ
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
-
background
一括指定 background-position-x
background-position-y
background-position-inline
background-position-block
border-bottom-color
border-bottom-style
border-bottom-width
-
border-bottom
一括指定 border-left-color
border-left-style
border-left-width
-
border-left
一括指定 border-right-color
border-right-style
border-right-width
-
border-right
一括指定 border-top-color
border-top-style
border-top-width
-
border-top
一括指定 -
border-color
一括指定 -
border-style
一括指定 -
border-width
一括指定 -
border
一括指定 border-collapse
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
-
border-radius
一括指定 border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
-
border-image
一括指定 box-shadow
データ型
<line-style>
列挙型
ガイド
- CSS の学習: 背景と境界
-
CSS の背景画像を使用して装飾画像を実装する方法を説明します。
- 複数の背景の使用
-
要素に 1 つ以上の背景を設定する方法を説明します。
- 背景画像の拡大縮小
-
背景画像のサイズや繰り返しの動作を変更する方法を説明します。
- CSS の学習: ボックスモデル
-
境界が、他のボックスモデルのプロパティとともに、 CSS ボックスモデルにどのような影響を与えるかを説明します。
- CSS グラデーションの使用
-
CSS でグラデーションの背景画像を作成する方法を説明します。
関連概念
-
border-block-end-color
プロパティ -
border-block-start-color
プロパティ -
border-inline-end-color
プロパティ -
border-block-end-style
プロパティ -
border-block-start-style
プロパティ -
border-inline-end-style
プロパティ -
border-block-end-width
プロパティ -
border-block-start-width
プロパティ -
border-inline-end-width
プロパティ -
border-start-end-radius
プロパティ -
border-end-start-radius
プロパティ -
border-end-end-radius
プロパティ -
box-sizing
プロパティ -
box-decoration-break
プロパティ -
text-shadow
プロパティ -
<url>
データ型 -
<color>
データ型 -
<image>
データ型 -
<position>
データ型 -
currentcolor
キーワード
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 |
関連情報
- 境界画像、角丸、ボックスシャドウを視覚的に作成する対話ツールです。
- 境界画像作成ツール
- CSS を使った HTML の要素への色の適用で、境界を含みます。
drop-shadow()
は入力画像にドロップシャドウ効果を適用するフィルター関数です。この関数はfilter
とbackdrop-filter
プロパティで使用します。