从零开始学web开发之CSS-5.边框样式

本文从零开始介绍web开发中的CSS边框样式,包括border-width、border-style、border-color的定义和示例,讲解如何使用border属性简洁写法以及如何设置局部边框样式,还提醒了在设置边框时的注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

要定义一个元素的边框必须要设置三个方面的元素,少设置一个属性浏览器也能正常识别,会以默认值的方式。

属性说明
border-width边框的宽度
border-style边框的外观
border-color边框的颜色

1.border-width

定义边框宽度
语法:

border-width:像素值;

2.border-style

定义边框的样式
语法:

border-style:属性值;

说明:

属性值说明-最常用属性
none无样式
hidden与nono相同,不过应用于表除外.对于表,hidden用于解决边框冲突。
solid实线
dashed虚线
dotted点线
double双线,双线的宽度等于border-width的值
属性值说明-3D边框样式
inset内凹
outset外凸
ridge脊线
groove槽线

当border-width定义得比较小时,3D属性效果几乎一样,只有当border-width定义得足够大时,这几个属性效果才比较明显。

3.border-color

定义边框的颜色
语法:

border-color:颜色值;

4.border属性简洁写法

定义一个元素的边框必须同时设置三个属性: border-width,border-style,border-color

border-width:1px;
border-style:solid;
border-color:red;

这样的写法效率低,所以可以一种简洁的写法进行定义。
border:1px solid red;
实现的效果与上面一致。

5.局部边框样式

边框都有上下左右四条边,而上述三个属性都是用以定义边框的整体样式的,即一个样式会应用于边框的四条边上。

如果想单独对边框进行设置,可以用下面的方法:

上边框:border-top

示例:

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

简洁写法:

border-top:1px solid red;
  • 下边框:border-bottom
  • 左边框:border-left
  • 右边框:border-right

示例与简洁写法同上。
可用以去除边框的某一条连线,如去除下边框线

border-bottom:0px;

不用再写出另外两个属性,因为0px已经代表了无框线了,也就不需要样式与颜色了。

6.注意点

  1. 边框定义到哪个元素就会为哪个元素添加边框线,不会为下一层的子元素添加边框线。
  2. 为tr设置边框无效果,因为tr是由td组成的,td的样式决定了tr的样式,如果一定要设置tr的边框,需要加上border-collapse属性。
  3. border:的简便写法可以不按照width style color的顺序来,浏览一样可以正常解析。

7.示例链接,右键可查看源码

示例网页链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值