《任务2 CSS总结》常用边框样式
2016-12-09 本文已影响0人
Jackpot_0213
边框风格样式属性border-style
1.none 边框 （默认值）
2.solid 直线边框
3.dashed 虚线边框
4.dotted 点状边框
5.double 双线边框
6.groove 凸槽边框
7.ridge 垄状边框
8.inset inset边框
9.outset outset边框
若想要实现其中边框的一条边有属性，可以将border-style改为border-top-style（top，bottom，left，right上下左右）
边框宽度：border-width
1.细边框：thin
2.中等边框：medium
3.粗边框：thick
4.固定值边框：数字+px
5.继承：inherit
边框颜色：border-color
实例如下：
<style type="text/css">
div{
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: brown;
border-width:medium;
border-color: #dddddd;
}
.div1{
border-style: solid;
}
.div2{
border-style: dashed;
}
.div3{
border-style: dotted;
}
.div4{
border-style: double;
}
.div5{
border-style: groove;
}
.div6{
border-style:ridge ;
}
.div7{
border-style:inset;
}
.div8{
border-style:outset;
}
</style>
</head>
<body>
<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>
Screenshot from 2016-12-09 16-26-40.png
