《图解CSS3——第3章 CSS3边框-1》

首页 > 代码库 > 《图解CSS3——第3章 CSS3边框-1》

《图解CSS3——第3章 CSS3边框-1》

2024-08-26 01:12:46 222人阅读

提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中，关于边框的运用会有什么样的不同之处呢？又将如何使用？本章我们带着这些问题开始我们的CSS3边框之旅。

3.1 CSS3边框简介

border属性在CSS1中就已经定义了，使用它可以设置元素的边框风格。

3.1.1 边框的基本属性

CSS1和CSS2中的边框属性确实很简单，其主要包括三个类型值。

border-width：设置元素边框的粗细。
border-color：设置元素边框的颜色。
border-style：设置元素边框的类型。

在实际中可以将上面三个属性合并在一起，其缩写语法如下：

border: border-width border-style border-color;

缩写后的每个属性之间使用空格隔开，而且它们之间没有先后顺序，可这里三个值中唯一需要的值是“border-style”。

3.1.2 边框的类型

| 属性值 | 功能描述 | 示例代码 | |---|---|---| | none | 定义无边框 | .ele{border:none;} | |hidden| 与"none"相同，不过应用于表时除外，对于表，hidden用于解决边框冲突 | .ele{border:hidden;} | | dotted | 定义点状边框 | .ele{border: 3px dotted red;} | | dashed | 定义虚线边框 | .ele{border: 3px dashed red;} | | solid | 定义实线边框 | .ele{border: 3px solid red;} | | double | 定义双线。双线的宽度等于border-width的值 | .ele{border: 3px double red;} | | groove | 定义3D凹槽边框，其效果取决于border-color的值 | .ele{border: 3px groove red;} | | ridge | 定义3D垄状边框，其效果取决于border-color的值 | .ele{border: 3px ridge red;} | | inset | 定义3Dinset边框，其效果取决于border-color的值 | .ele{border: 3px inset red;} | | outset | 定义3Doutset边框，其效果取决于border-color的值 | .ele{border: 3px outset red;} | | inherit | 规定应该从父元素继承边框样式。部分浏览器不支持这个属性值 | .ele{border: 3px inherit red;} |