border-radius プロパティ
border-radius を使用すると、要素の角を丸くすることができるようになります。
<!DOCTYPE html> <html> <head> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div>border-radius プロパティを使用すると、要素の角を丸くすることができるようになります。</div> </body> </html>
box-shadow プロパティ
box-shadow は、ボックスに影を付けます。
<!DOCTYPE html> <html> <head> <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>
border-image プロパティ
border-image プロパティを使用すれば、ボーダーに画像を使用することができるようになります。
注: Internet Explorer 10 以前のバージョンは、border-image プロパティをサポートしていません。
round(画像の繰返し)
画像は領域を埋めるようにタイル状に(繰返し)並べられる
stretch(画像の引伸ばし)
画像は領域を埋めるように引伸ばされる。
使用した画像
<!DOCTYPE html> <html> <head> <style> div.border-image{ border:15px solid transparent; width:250px; padding:10px 20px; } #round{ -webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(img/border.png) 30 30 round; /* Opera 10.5-12.1 */ border-image:urlimg/(border.png) 30 30 round; } #stretch{ -webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 */ -o-border-image:url(img/border.png) 30 30 stretch; /* Opera 10.5-12.1 */ border-image:url(img/border.png) 30 30 stretch; } </style> </head> <body> <p><strong>注:</strong> Internet Explorer 10 以前のバージョンは、border-image プロパティをサポートしていません。</p> <h3>round(画像の繰返し)</h3> <div id="round">画像は領域を埋めるようにタイル状に(繰返し)並べられる</div> <h3>stretch(画像の引伸ばし)</h3> <div id="stretch">画像は領域を埋めるように引き伸ばされる。</div> <p>使用した画像</p> <img src="img/border.png"> </body> </html>
border で三角形を作る
コンテンツの各頂点と、ボーダーの各頂点は直線で結ばれるのを利用して、三角形を作ってみます。
(1)10pxのボーダーを持った領域を描画
<style> #bd10 { width:80px; height:80px; background:#909; border-width:10px; border-style:solid; border-top-color:red; border-right-color:blue; border-bottom-color:green; border-left-color:yellow; } </style>
(2)ボーダーを40pxに広げて行く。
<style> #bd40 { width:20px; height:20px; background:#909; border-width:40px; border-style:solid; border-top-color:red; border-right-color:blue; border-bottom-color:green; border-left-color:yellow; </style>
(3)終にはコンテンツ領域を消してしまう。
4つの三角形が出来上がる。
<style> #bd50 { width:0; height:0; background:#909; border-width:50px; border-style:solid; border-top-color:red; border-right-color:blue; border-bottom-color:green; border-left-color:yellow; } </style>
(4)必要な三角形を残し不要なものは消します。
<style> #sankaku{ width:0; height:0; border-width:50px; border-style:solid; border-top-color:red; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } </style>