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;
/*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>
时间： 2024-10-14 00:36:38