css border 属性用于设置元素的边框。
通过css border 可以设置元素的边框样式(实线、虚线)、颜色和大小。
css border 有以下这些属性,它们分别是:
属性 | 说明 |
---|---|
border-color | 设置边框颜色 |
border-width | 设置边框宽度 |
border-style | 设置边框样式,必须 |
border-radius | 设置边框圆角,css3 |
border 语法
以上是单独设置边框的样式,border也有他自己的语法,它是一个简写属性,语法如下:
border: border-width border-style border-color;
从上面的语法可以看出,我们可以一次性设置边框的颜色,样式,和大小,这也是我们在开发中经常用到的方法。
border 例子
<!DOCTYPE html>
<html>
<title>css 边框 border</title>
<head>
<style>
p.one {
border: 2px solid green;
}
p.two {
border: 3px double red;
}
p.three {
border: 5px dotted blue;
}
</style>
</head>
<body>
<p class="one">这是一个实心的红色边框</p>
<p class="two">这是双实线的红色边框</p>
<p class="three">这是虚线的蓝色边框</p>
</body>
</html>
效果如下所示: