您的位置：首页 > Web前端 > CSS

css属性之边框属性

2016-08-28 20:20 330 查看
本篇小结css属性的边框属性的一些使用方法。

<html>
<head>
<title>CSS常见属性(边框属性)</title>
<meta charset="utf-8">
<style type="text/css">
div{
width:50px;
height:50px;
float:left;
margin-right:10px;
background-color:#f61;
border-width:10px;

border-color:green blue yellow black; /*green blue yellow black代表边框四个方向的颜色*/

}
.div0{
border-style:solid;
border-width:5px; /*border-width边框宽度*/
}
.div1{
border-top-style:solid; /*solid直线边框*/
}
.div2{
border-bottom-style:dashed; /*dashed虚线边框*/
}
.div3{
border-left-style:dotted; /*dotted点状边框*/
}
.div4{
border-left-style:dotted;
border-right-style:double; /*double双线边框*/
}
.div5,.div6,.div7,.div8{

width:85px;
height:45px;
/*border-width:20px;
background:none;
border-color:#ddd;*/
border:solid 2px black; /*简写的方式*/

}
.div5{
border-style:groove; /*groove是凸槽边框*/
}
.div6{
border-style:ridge; /*ridge是垄状边框*/
}
.div7{
border-style:inset; /*inset是inset边框*/
}
.div8{
border-style:outset;
}
</style>
</head>
<body>
<div class="div0">div0</div>
<div class="div1">solid</div>
<div class="div2">dashed</div>
<div class="div3">dotted</div>
<div class="div4">double</div>
<div class="div5">凸槽边框</div>
<div class="div6">垄状边框</div>
<div class="div7">inset</div>
<div class="div8">outset</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 边框 属性
相关文章推荐
新的分享
章节导航