教育改变生活
标题: CSS-7 边框 [打印本页]
作者: 却尘 时间: 2023-10-20 09:58
标题: CSS-7 边框
CSS边框
CSS 边框属性
CSS border 属性允许您指定元素边框的样式、宽度和颜色。
我的所有边都有边框。
我有一条红色的下边框。
我有圆角边框。
我有一条蓝色的左边框。
CSS 边框样式
border-style 属性指定要显示的边框类型。
允许以下值：
· dotted - 定义点线边框
· dashed - 定义虚线边框
· solid - 定义实线边框
· double - 定义双边框
· groove - 定义 3D 坡口边框。效果取决于 border-color 值
· ridge - 定义 3D 脊线边框。效果取决于 border-color 值
· inset - 定义 3D inset 边框。效果取决于 border-color 值
· outset - 定义 3D outset 边框。效果取决于 border-color 值
· none - 定义无边框
· hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
演示不同的边框样式：
p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid{border-style: solid;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset {border-style:inset;}
p.outset{border-style: outset;}
p.none {border-style:none;}
p.hidden{border-style: hidden;}
p.mix {border-style:dotted dashed solid double;}
结果：
点状边框。
虚线边框。
实线边框。
双线边框。
凹槽边框。其效果取决于 border-color 的值。
垄状边框。其效果取决于 border-color 的值。
3D inset 边框。其效果取决于 border-color 的值。
3D outset 边框。其效果取决于 border-color 的值。
无边框。
隐藏边框。
混合边框。
CSS边框宽度
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
实例
演示不同的边框宽度：
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
结果：
5px border-width
medium border-width
2px border-width
thick border-width
特定边的宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：
实例
p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}
CSS 边框颜色
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
· name - 指定颜色名，比如 "red"
· HEX - 指定十六进制值，比如 "#ff0000"
· RGB - 指定 RGB 值，比如"rgb(255,0,0)"
· HSL - 指定 HSL 值，比如 "hsl(0,100%, 50%)"
· transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
实例
演示不同的边框颜色：
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
结果：
红色实线边框
绿色实线边框
蓝色点状边框
特定边框的颜色
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
HEX 值
边框的颜色也可以使用十六进制值（HEX）来指定：
实例
p.one {
border-style: solid;
border-color: #ff0000; /* 红色 */
}
RGB 值
或者使用 RGB 值：
实例
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 红色 */
}
HSL 值
也可以使用 HSL 值：
实例
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 红色 */
}
CSS边框各边
CSS 边框 - 单独的边
从上一章的例子中，您已经看到可以为每一侧指定不同的边框。
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
实例
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
结果：
不同的边框样式
不同的边框样式
上例的结果与此相同：
实例
p {
border-style: dotted solid;
}
它的工作原理是这样的：
如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
· 上边框是虚线
· 右边框是实线
· 下边框是双线
· 左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
· 上边框是虚线
· 右和左边框是实线
· 下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
· 上和下边框是虚线
· 右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
· 四条边均为虚线
实例
/* 四个值 */
p {
border-style: dotted solid double dashed;
}
/* 三个值 */
p {
border-style: dotted solid double;
}
/* 两个值 */
p {
border-style: dotted solid;
}
/* 一个值 */
p {
border-style: dotted;
}
上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。
| 欢迎光临 教育改变生活 (http://193.112.175.132/discuz/) |
Powered by Discuz! X3.2 |