css border-image-slice属性

border

UK[ˈbɔ:də(r)] US[ˈbɔ:rdə(r)]

n.ボーダー; エッジ; エッジ; ラッピング エッジ

vt.& vi....の端でバインド...

vt. の端に沿って、囲む...、端...

vi近似、隣接

三人称単数: borders 複数形: borders 現在分詞: bordering 過去形: bordered 過去分詞: bordered

image

英[ ˈɪmɪdʒ] 美[ˈɪmɪdʒ]

##n.イメージ; ポートレート; コンセプト、意図; 鏡像、イメージ

vt. 反映; 想像; イメージ; シンボル

三人称単数形: 画像 複数形: 画像 現在分詞: イメージング 過去形: imaged 過去分詞: imaged

slice

英[slaɪs] 美[slaɪs]

vt. スライスにカット; カットオフ; 分割

n. 薄切り; 部分; (ミスによる変化球)

vi. スラントショット

サード人称単数形: スライス 複数形: スライス 現在分詞: スライス 過去形: スライス 過去分詞: スライス

css border-image-slice属性構文

関数: 画像境界線の内側のオフセットを指定します。

構文: border-image-slice:number|%|fill;

##説明: number の値を表す数値。画像のピクセル (ラスター画像の場合) またはベクトル座標 (ベクトル画像の場合)。 % 画像サイズに対するパーセント値。画像の幅は水平オフセットに影響し、高さは垂直オフセットに影響します。 fill は境界線イメージの中央部分を保持します。

注: この属性は、画像の上端、右端、下端、左端の内側へのオフセットを指定します。画像は 4 つの隅、4 つの側面、および 4 つの領域の 9 つの領域に分割されます。真ん中のエリアが1つ。 fill キーワードが使用されない限り、画像の中央部分は破棄されます。 4 番目の値/パーセンテージを省略した場合、2 番目の値と同じになります。 3 番目の値を省略した場合は、1 番目の値と同じになります。 2 番目の値を省略した場合は、1 番目の値と同じになります。

css border-image-slice属性例

div{
border-image-source: url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg);
border-image-slice: 50% 50%;
}