CSS3.0の各種修飾 - border
・border
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>border</title> <style type="text/css"> div { width:300px; height:40px; } </style> </head> <body> border:5px solid #666 <div style="border:5px solid #666"> 6pxの実線</div> border:2px dashed #666 <div style="border:2px dashed #666"> 2pxの破線</div> border:2px dotted #666 <div style="border:2px dotted #666"> 2pxの点線</div> border:5px groove #666 <div style="border:5px groove #666"> 5pxの立体的に窪んだ線</div> border:8px inset #666 <div style="border:8px inset #666"> 8pxの立体感ある？線</div> border:8px outset #666 <div style="border:8px outset #666"> 8pxの立体感ある？線</div> border-width:8px 2px;border-style:solid dashed;border-color:#ccc #444; <div style="border-width:8px 2px;border-style:solid dashed; border-color:#ccc #444;"> 上下：ｺ8px solid #ccc;<br/> 左右：2px dashed #444</div> border-width:3px;border-style:solid;border-color:#ccc #ccc #444 #444; <div style="border-width:8px;border-style:solid; border-color:#ccc #ccc #444 #444;"> それぞれ違う立体感のある</div> </body> </html>
グラデーション効果のボーダー
- border-top-colors
- border-right-colors
- border-bottom-colors
- border-left-colors
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> グラデーション効果のボーダー </title> <style type="text/css"> div { width:300px; height:40px; font-weight:bold; } </style> </head> <body> <div style="border:10px solid white; -moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; -moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; -moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; -moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;"> 10pxのグラデーション効果のボーダー</div> </body> </html>
角丸
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 角丸 </title> <style type="text/css"> div { width:300px; height:60px; } </style> </head> <body> <div style="border:3px solid black;border-radius:20px;"> 半径20pxの角丸</div> <div style="border:3px dotted black;border-radius:20px;"> 半径20pxの角丸</div> <div style="background-color:#aaa;border-radius:20px;"> 半径20pxの角丸(ボーダーなし)</div> <div style="border:3px solid black;border-radius:16px 40px;"> 16px, 40pxの角丸</div> <div style="border:3px solid black;border-radius:10px 20px 40px;"> 16px, 20px, 40pxの角丸</div> <div style="border:3px solid black;border-radius:10px 20px 30px 40px;"> 10px,20px,30px,40pxの角丸</div> <div style="border:3px solid black; border-top-left-radius:30px; border-top-right-radius:20px; border-bottom-right-radius:40px; border-bottom-left-radius:10px;"> それぞれ半径指定</div> </body> </html>
イメージをボーダーに設定する
- border-image
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> イメージボーダー </title> <style type="text/css"> div { width:400px; height:45px; } </style> </head> <body> border.png<br> <img src="border.png"/ > <br><br> border-image: url(border.png) 27 <div style="-o-border-image: url(border.png) 27; -moz-border-image: url(border.png) 27; -webkit-border-image: url(border.png) 27;"> デフォルト幅</div><br> border-image: url(border.png) 27/27px <div style="-o-border-image: url(border.png) 27/27px; -moz-border-image: url(border.png) 27/27px; -webkit-border-image: url(border.png) 27/27px;"> 幅27px</div><br> border-image: url(border.png) 27/27px repeat <div style="-o-border-image: url(border.png) 27/27px repeat; -moz-border-image: url(border.png) 27/27px repeat; -webkit-border-image: url(border.png) 27/27px repeat;"> 幅27px,繰り返し</div><br> border-image: url(border.png) 27/27px round; <div style="-o-border-image: url(border.png) 27/27px round; -moz-border-image: url(border.png) 27/27px round; -webkit-border-image: url(border.png) 27/27px round;"> 幅27px,round式</div><br> border-image: url(border.png) 27/27px stretch round; <div style="-o-border-image: url(border.png) 27/27px stretch round; -moz-border-image: url(border.png) 27/27px stretch round; -webkit-border-image: url(border.png) 27/27px stretch round;"> 幅27px,stretch式で横、round式で縦</div><br> </body> </html>
