CSS边框——CSS实验室

从下面开始介绍的边框、填充边界都在CSS盒子中有所介绍。现在我们就通过实验来进一步了解这些属性的实际效果与作用。

我们首先来设置一个基础的边框,这样可以继续测试后续边框的效果。点击下面的按钮即可。

CSS边框宽度:border-width

通过设置CSS的border-width属性,我们可以设置边框的宽度。在下面的文本框里填入用像素表示的宽度,点击按钮就可以设置上面段落边框的宽度了。

border-width: px 

CSS边框样式:border-style

通过设置border-style属性,我们可以改变边框的样式,试着在下拉框中选择边框样式,看看各种样式的区别。需要注意的是,有的边框样式只有在边框宽度至少有几像素宽的时候才会比较明显。

border-style:

CSS边框颜色:border-color

通过设置CSS中的border-color属性,我们可以设置边框的颜色。同样,我们除了可以用颜色名字来设置这个属性之外,也可以用其它方法设置颜色,可以参考CSS颜色实验

border-color:

CSS边框:border

border也是一个省略写法,可以一次设置以上三个边框属性,顺序如下:border-width、border-style、border-color。CSS单边边框:border-bottom、border-left、border-right、border-top

这些CSS边框属性和上面的border属性是一样的,只不过每个属性只会设置一个方向的边框。

CSS单边边框的单个属性

这类的属性包括:border-bottom-color、border-bottom-style、border-bottom-width、border-left-color……指定这些属性的方法和上面类似。


返回:CSS实验室 CSS入门 首页