CSS3 その他

を使用して、画像を要素のボーダーに適用することができます。3ボーダー(Border)

を使用して、画像を要素のボーダーに適用することができます。3ボーダー

CSS3が提供され、要素のボーダーに画像を適用するための2つの新しい属性が用意されています。- border-フィルタ(Filters)-imageを使用して、ボーダーのborder

radius属性についてご紹介します。画像を使用せずに角を作成する属性もあります。3の新しいボーダー属性について、他のボーダーに関連する属性については、次のセクションでCSSCSSボーダーチュートリアル。

CSSを作成3角

このborder-radius属性を使用して、角を作成することができます。この属性は通常、外縁の角の形状を定義します。CSS3以前は、スライス画像を使用して非常に厄介な角を作成していました。

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　background:　#ffb6c1;
　　　　border:　2px　solid　#f08080;
　　　　border-radius:　20px;
}

CSSを追加3ボーダー画像

border-image属性を使用して、要素のボーダーとして画像を指定することができます。
ボーダーのデザインはborder-imageソースURLで指定された画像の侧面と角で作成されます。境界画像に対して、さまざまな方法でスライス、リピート、スケーリング、ストレッチを行って、境界画像エリアの大きさに合わせることができます。

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　-webkit-border-image:　url("border.png")　30　30　round;　/*　Safari　3.1-5　*/
　　　　-o-border-image:　url("border.png")　30　30　round;　/*　Opera　11-12.1　*/
　　　　border-image:　url("border.png")　30　30　round;
}