border-image-outset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。
境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントを受け取ったりすることはありません。
試してみましょう
border-image-outset: 0; border-image-outset: 15px; border-image-outset: 30px; border-image-outset: 40px; <section id="default-example"> <div id="example-element">This is a box with a border around it.</div> </section> #example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: #000; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em; } 構文
css
/* <length> 値 */ border-image-outset: 1rem; /* <number> 値 */ border-image-outset: 1.5; /* 上下 | 左右 */ border-image-outset: 1 1.2; /* 上 | 左右 | 下 */ border-image-outset: 30px 2 45px; /* 上 | 右 | 下 | 左 */ border-image-outset: 7px 12px 14px 5px; /* グローバル値 */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: revert; border-image-outset: revert-layer; border-image-outset: unset; border-image-outset プロパティは、1 つから 4 つの値を使用して指定することができます。それぞれの値は <length> または <number> です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。
- 値が 1 つ指定された場合は、全四辺に適用されます。
- 値が 2 つ指定された場合は、1 つ目が上下に、2 つ目が左右に適用されます。
- 値が 3 つ指定された場合は、1 つ目が上に、2 つ目が左右に、3 つ目が下に適用されます。
- 値が 4 つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
値
<length>-
border-imageがはみ出す寸法を長さ — 数値と単位で指定します。 <number>-
border-imageがはみ出す寸法を、要素の対応するborder-widthの倍数で指定します。例えば、要素がborder-width: 1em 2px 0 1.5remで、border-image-outset: 2であると、最終的なborder-image-outsetは2em 4px 0 3remとして計算されます。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 計算値の型による |
形式文法
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
例
境界画像をはみ出させる
HTML
html
<div id="outset">この要素の境界画像ははみ出しています。</div> CSS
css
#outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } 例
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |
ブラウザーの互換性
Loading…