border边框
border是一个常见的属性,如同border的中文意思一样,它的作用是为元素设置边框。
代码:
<style>
div{
width: 100px;
height: 100px;
background: red;
}
.one{
border: 2px solid #000000;
background: red;
}
</style>
<body>
one
<div class="one"></div>
</body>
页面显示:
border属性加上solid值设置实线,如上页面显示图。border属性加上dashed值设置虚线,border属性加上dotted值设置点状线。
代码:
<style>
div{
width: 100px;
height: 100px;
background: red;
}
.dashed{
border: 2px dashed #000000;
}
.dotted{
border: 2px dotted #000000;
}
</style>
<body>
<p>dashed</p>
<div class="dashed"></div>
<p>dotted</p>
<div class="dotted"></div>
</body>
页面显示:
Border属性还可以设置边框的宽度。
CSS代码:
.one{
border: 2px solid #000000;
border-bottom: 4px dashed #44D134;
}
.two{
border: 5px solid #000000;
}
.three{
border: 8px solid #000000;
}
<body>
one
<div class="one"></div>
two
<div class="two"></div>
three
<div class="three"></div>
</body>
页面显示:
Border属性还可以单独设置元素一个方向的样式。
例:
代码:
.one{
border: 2px solid #000000;
border-bottom: 4px dashed #44D134;
}
页面显示: