css3的边框详解

最新推荐文章于 2022-09-29 19:18:53 发布

weixin_34185560

最新推荐文章于 2022-09-29 19:18:53 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/minchao/p/6088302.html

版权

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>

转载于:https://www.cnblogs.com/minchao/p/6088302.html

weixin_34185560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的边框详解

css边框的三个属性border:用法：.box{ border:border-width||border-style||border-color;}(第三个颜色使可选的)css3中可以创建圆角边框，添加阴影框，并作为边框的形象而不使用设计程序border-radius:用法：.box{ border-radius:25px;}border-sha...
复制链接

扫一扫