css3的边框详解

css边框的三个属性

border:

用法：.box{ border:border-width||border-style||border-color;}(第三个颜色使可选的)

 

 

css3中可以创建圆角边框，添加阴影框，并作为边框的形象而不使用设计程序

  1. border-radius:

用法 ：.box{ border-radius:25px;}

  1. border-shadow:

用法 ：.box{ box-shadow:10px 10px 5px #888888;}

第一个参数是X轴偏移量，第二个参数是Y轴偏移量，第三个是阴影的尺寸，第四个是颜色

  1. 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;
/*width: 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>

 

posted @ 2016-11-22 10:48  micale  阅读(337)  评论(0)  编辑  收藏  举报