首页 > 代码库 > 边框样式的设置

边框样式的设置

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式的设置</title>
<style>
div{
width:400px;
height:400px;
}
.div1{
border-width:10px;/*边框的宽度*/
border-style:solid;/*边框的样式*/
border-color:red;/*边框的颜色*/
/*集合属性border:10px solid red;*/
}
.div2{
margin-top:20px;/*margin:两个div的外边距*/
border-left:10px solid red;/*左边框的修饰*/
border-top:10px double red;/*上边框的修饰,double双线*/
border-right:10px dashed red;/*上边框的修饰,dashed虚线*/
border-top:10px dotted red;/*上边框的修饰,dotted点划线*/
border-radius:10%;/*修饰边角,变圆滑,取值和margin一样*/
}
</style>

</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

边框样式的设置