IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3
5 边框属性
边框属性用于设置一个元素的边框风格、边框宽度、边框颜色,可以一起设置4条边的边框,也可对上边框、右边框、下边框和左边框单独设置。分别介绍如下。
a.边框风格属性
可以通过边框风格属性border-style设定上、下、左、右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1~4个关键字,如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果给出一个值,它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格,它们可以使用的属性值、解释和效果如图1所示。
图1 边框风格的属性值、解释和效果图
例句如下所示:
b.边框宽度属性
可以通过边框宽度属性border-width设定上、下、左、右边框的宽度,该属性用1~4个值来设置元素的边界,值是一个关键字或长度,不允许使用负值长度。如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果只给出一个值,它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值,还可以用medium(默认值)、thin(比medium细)或thick(比medium粗)值。例句如下所示:
c.边框颜色属性
可以通过边框颜色属性border-color设定上、下、左、右边框的颜色,可以使用1~4个关键字。如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果给出一个值,则它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。例句如下所示:
d.略写的边框属性
CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、样式和颜色的略写,它包含border-width、border-style和border-color属性。例句如下:
p {border:5px solid gray;} /* 设置段落元素的4个边框为直线式边框、5像素宽的灰色 */
边框属性border只能设置4种边框,也只能给出一组边框的宽度和样式。为了给出一个元素的4种边框的不同的值,网页制作者必须使用一个或更多的属性,如上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框样式、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
最新文章
- Javascript:谈谈JS的全局变量跟局部变量
- HDU 1166 敌兵布阵 (数状数组,或线段树)
- Swift开发学习-03 Swift技巧
- 使用oschina的git服务器
- Trie树学习2
- 【锋利的JQuery-学习笔记】遮罩层
- js对联广告代码,兼容性高
- GDI+编程的10个基本技巧(转)
- RH033读书笔记(8)-Lab 9 Using vim
- XAF-UI元素概述
- digitalocean纽约机房最先开通IPv6
- Eclipse配置Git发布项目到Github
- php5.6在yum下安装redis
- ServiceStack.OrmLite T4模板使用记录
- ConcurrentHashMap基于JDK1.8源码剖析
- 选择排序SelectionSort
- tensorflow-RNN和LSTM
- entityframework单例模式泛型用法
- httpd基于域名虚拟主机配置
- 缓存数据库-redis数据类型和操作(list)