css边框的三个属性
border:
用法：.box{ border:border-width||border-style||border-color;}(第三个颜色使可选的)
css3中可以创建圆角边框，添加阴影框，并作为边框的形象而不使用设计程序
- border-radius:
用法 ：.box{ border-radius:25px;}
- border-shadow:
用法 ：.box{ box-shadow:10px 10px 5px #888888;}
第一个参数是X轴偏移量，第二个参数是Y轴偏移量，第三个是阴影的尺寸，第四个是颜色
- border-image:
用法 ：.box{ border- image:url() 30 30 round;
-webkit-border-image:url() 30 30 round;/*Safari and older*/
-o-border-image:url() 30 30 round;/*Opera*/
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框</title> <style> .flex-container { display: -webkit-flex; display: flex; flex-flow:row wrap; justify-content:stretch; /*align-items:baseline;*/ align-content:stretch; /* 400px;*/ height:400px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 200px; height: 100px; margin: auto; margin-right: 10px; border:1px solid red; border-radius:5px 15px 20px 35px; /*边框阴影*/ -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } .flex-item:hover{ /* -webkit-flex-shrink:0.5; flex-shrink:2;*/ flex-grow:1.2; border-color: green; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> <div class="flex-item">flex item 4 </div> <div class="flex-item">flex item 5 </div> <div class="flex-item">flex item 6</div> <div class="flex-item">flex item 7</div> <div class="flex-item">flex item 8</div> <div class="flex-item">flex item 9 </div> <div class="flex-item">flex item 10 </div> <!-- <div class="flex-item">flex item 4 </div> <div class="flex-item">flex item 5 </div> <div class="flex-item">flex item 6</div> <div class="flex-item">flex item 7</div> <div class="flex-item">flex item 8</div> <div class="flex-item">flex item 9 </div> <div class="flex-item">flex item 10 </div> </div> --> </body> </html>