CSS边框的功能
CSS边框的功能: 用于为html元素设置边框效果 css边框的语法: border:边框宽度 边框样式 边框颜色 注意事项: border属性起始是边框宽度、边框样式、边框颜色三个CSS属性的缩写
CSS 边框属性示例
我的所有边都有边框
我有一条红色的下边框
我有圆角边框
我有一条红色的左边框。
CSS 边框样式
CSS边框样式可以输入以下值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值
无边框。
混合边框。