从下面开始介绍的边框、填充和边界都在CSS盒子中有所介绍。现在我们就通过实验来进一步了解这些属性的实际效果与作用。
我们首先来设置一个基础的边框,这样可以继续测试后续边框的效果。点击下面的按钮即可。
通过设置CSS的border-width属性,我们可以设置边框的宽度。在下面的文本框里填入用像素表示的宽度,点击按钮就可以设置上面段落边框的宽度了。
border-width: px
通过设置border-style属性,我们可以改变边框的样式,试着在下拉框中选择边框样式,看看各种样式的区别。需要注意的是,有的边框样式只有在边框宽度至少有几像素宽的时候才会比较明显。
border-style:
通过设置CSS中的border-color属性,我们可以设置边框的颜色。同样,我们除了可以用颜色名字来设置这个属性之外,也可以用其它方法设置颜色,可以参考CSS颜色实验。
border-color:
border也是一个省略写法,可以一次设置以上三个边框属性,顺序如下:border-width、border-style、border-color。CSS单边边框:border-bottom、border-left、border-right、border-top
这些CSS边框属性和上面的border属性是一样的,只不过每个属性只会设置一个方向的边框。
这类的属性包括:border-bottom-color、border-bottom-style、border-bottom-width、border-left-color……指定这些属性的方法和上面类似。