理解盒子的border

最新推荐文章于 2020-10-22 14:16:51 发布

xijiaoliumang

最新推荐文章于 2020-10-22 14:16:51 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xijiaoliumang/article/details/50651008

<!doctype = html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Css3中的border</title>
<style type = "text/css">
body{margin:100px;}
div{
margin:30px;
}

.div1{
border-top:20px solid red ;
border-right:20px solid blue ;
border-bottom:20px solid yellow ;
border-left:20px solid black ;
width:30px;
height:30px;

}
.div2{

border-style:solid dashed dashed dashed;
border-width:40px;
border-color:#F00 transparent transparent transparent;
width:0px;
height:0px;
}
.div3{
margin-top:20px;
border-top:40px solid red ;
border-right:40px solid blue ;
border-bottom:40px solid yellow ;
border-left:40px solid black ;
width:60px;
height:40px;
border-radius:10px;


}

.div4{
margin-top:20px;
border-top:40px solid red ;
border-right:40px solid blue ;
border-bottom:40px solid yellow ;
border-left:40px solid black ;
width:60px;
height:40px;
border-radius:10px;


}

.div5{
margin-top:20px;
border-top:1px solid red ;
border-right:1px solid blue ;
border-bottom:1px solid yellow ;
border-left:1px solid black ;
width:60px;
height:40px;
border-radius:20px;
background-color:#CCC;



}

.div6{
margin-top:20px;
border-top:1px solid red ;
border-right:1px solid blue ;
border-bottom:1px solid yellow ;
border-left:1px solid black ;
width:160px;
height:100px;
border-radius:50%/50%;
background-color:#CCC;

}
</style>
</head>
<body>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>
<div class="div4">DIV4</div>
<div class="div5">DIV5</div>
<div class="div6">DIV6</div>
</body>

</html>

最终效果