Skip to content

Latest commit

 

History

History
143 lines (111 loc) · 7.94 KB

index.md

File metadata and controls

143 lines (111 loc) · 7.94 KB
Raw
title slug l10n
CSS 背景と境界
Web/CSS/CSS_backgrounds_and_borders
sourceCommit
ef75fee56d11bb7bef44240627abb97cd388b5be

{{CSSRef}}

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

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

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

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

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

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

{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}

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

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

リファレンス

プロパティ

  • {{cssxref("background-attachment")}}

  • {{cssxref("background-clip")}}

  • {{cssxref("background-color")}}

  • {{cssxref("background-image")}}

  • {{cssxref("background-origin")}}

  • {{cssxref("background-position")}}

  • {{cssxref("background-repeat")}}

  • {{cssxref("background-size")}}

  • {{cssxref("background")}} 一括指定

  • {{cssxref("background-position-x")}} {{experimental_inline}}

  • {{cssxref("background-position-y")}} {{experimental_inline}}

  • {{cssxref("background-position-inline")}} {{experimental_inline}}

  • {{cssxref("background-position-block")}} {{experimental_inline}}

  • {{cssxref("border-bottom-color")}}

  • {{cssxref("border-bottom-style")}}

  • {{cssxref("border-bottom-width")}}

  • {{cssxref("border-bottom")}} 一括指定

  • {{cssxref("border-left-color")}}

  • {{cssxref("border-left-style")}}

  • {{cssxref("border-left-width")}}

  • {{cssxref("border-left")}} 一括指定

  • {{cssxref("border-right-color")}}

  • {{cssxref("border-right-style")}}

  • {{cssxref("border-right-width")}}

  • {{cssxref("border-right")}} 一括指定

  • {{cssxref("border-top-color")}}

  • {{cssxref("border-top-style")}}

  • {{cssxref("border-top-width")}}

  • {{cssxref("border-top")}} 一括指定

  • {{cssxref("border-color")}} 一括指定

  • {{cssxref("border-style")}} 一括指定

  • {{cssxref("border-width")}} 一括指定

  • {{cssxref("border")}} 一括指定

  • {{cssxref("border-collapse")}}

  • {{cssxref("border-bottom-left-radius")}}

  • {{cssxref("border-bottom-right-radius")}}

  • {{cssxref("border-top-left-radius")}}

  • {{cssxref("border-top-right-radius")}}

  • {{cssxref("border-radius")}} 一括指定

  • {{cssxref("border-image-outset")}}

  • {{cssxref("border-image-repeat")}}

  • {{cssxref("border-image-slice")}}

  • {{cssxref("border-image-source")}}

  • {{cssxref("border-image-width")}}

  • {{cssxref("border-image")}} 一括指定

  • {{cssxref("box-shadow")}}

データ型

  • {{cssxref("line-style")}} 列挙型

ガイド

関連概念

  • {{cssxref("border-block-end-color")}} プロパティ

  • {{cssxref("border-block-start-color")}} プロパティ

  • {{cssxref("border-inline-end-color")}} プロパティ

  • {{cssxref("border-inline-start-color")}} プロパティ

  • {{cssxref("border-block-end-style")}} プロパティ

  • {{cssxref("border-block-start-style")}} プロパティ

  • {{cssxref("border-inline-end-style")}} プロパティ

  • {{cssxref("border-inline-start-style")}} プロパティ

  • {{cssxref("border-block-end-width")}} プロパティ

  • {{cssxref("border-block-start-width")}} プロパティ

  • {{cssxref("border-inline-end-width")}} プロパティ

  • {{cssxref("border-inline-start-width")}} プロパティ

  • {{cssxref("border-start-start-radius")}} プロパティ

  • {{cssxref("border-start-end-radius")}} プロパティ

  • {{cssxref("border-end-start-radius")}} プロパティ

  • {{cssxref("border-end-end-radius ")}} プロパティ

  • {{cssxref("box-sizing")}} プロパティ

  • {{cssxref("box-decoration-break")}} プロパティ

  • {{cssxref("text-shadow")}} プロパティ

  • {{cssxref("url", "url()")}} CSS 関数

  • <color> データ型

  • <image> データ型

  • <position> データ型

  • currentcolor キーワード

仕様書

{{Specifications}}

関連情報