CSS 背景と境界

CSS 背景と境界モジュールでは、境界、角の丸み、ボックスシャドウを要素に追加します。

さまざまな種類の境界スタイルを追加することができます。ラスター画像から CSS グラデーションまで、どのような種類の画像でも境界を記載することができます。境界は角形または丸めることができ、それぞれの角には異なる半径を設定することができます。要素は、境界があってもなくても丸めることができます。

ボックスシャドウには、内側の影も外側の影も、単一の影も複数の影も、明瞭なものもあれば透明へフェードするものもあります。外側の box-shadow は、要素の境界ボックスが不透明であるかのように影を落とします。内側の box-shadow は、パディング境界の外側がすべて不透明であるかのように影を落とします。影は明瞭にするか、影の色が透明へ遷移する拡散距離を含めることができます。

このモジュールのプロパティは、 <table> 内のセルが共有境界を持つべきか別個の境界を持つべきかを定義することもできます。

背景、境界、ボックスシャドウの動き

この境界、背景、ボックスシャドウの例は、線形および放射グラデーションで作られた中央の背景画像で構成されています。一連のボックスシャドウが、境界を「ポップ」に見せています。左の要素には境界画像が設定されています。右の要素には丸い点線の境界があります。

背景画像は background-image で定義されています。画像は background-position で中央に配置されています。複数の背景画像に対して別々の background-clip プロパティの値を使用して、背景画像がコンテンツボックス内に収まるようにしています。背景色は、 border-image および点線の border の透明部分から背景が現れるのを防ぐために、パディングボックスでクリップしています。右の要素の角丸は border-radius プロパティを使用して作成しています。単一の box-shadow 宣言を使用して、内側と外側のすべての影を設定しています。

この例のコードを見るには、 GitHub でソースを表示してください。

リファレンス

プロパティ

データ型

ガイド

CSS の学習: 背景と境界

CSS の背景画像を使用して装飾画像を実装する方法を説明します。

複数の背景の使用

要素に 1 つ以上の背景を設定する方法を説明します。

背景画像の拡大縮小

背景画像のサイズや繰り返しの動作を変更する方法を説明します。

CSS の学習: ボックスモデル

境界が、他のボックスモデルのプロパティとともに、 CSS ボックスモデルにどのような影響を与えるかを説明します。

CSS グラデーションの使用

CSS でグラデーションの背景画像を作成する方法を説明します。

関連概念

仕様書

Specification
CSS Backgrounds and Borders Module Level 3

関連情報