読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

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>

f:id:liguofeng29:20160131173123p:plain

グラデーション効果のボーダー

  • 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>

f:id:liguofeng29:20160131173711p:plain

角丸

<!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>

f:id:liguofeng29:20160131174341p:plain

イメージをボーダーに設定する

  • 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>

f:id:liguofeng29:20160131175650p:plain