边框基本属性及类型
作者:zhushican 丨 时间:2022年08月11日 丨 分类：六六互联
边框基本属性及类型，主要包括如表3-13所示几种情况。
表3-13 边框基本属性
| 属性 | 简 介 |
| border-color | 设置四条边框的颜色。 |
| border-image | 设置或检索对象的边框使用图像来填充 |
| border-image-source | 设置或检索对象的边框是否用图像定义样式或图像来源路径 |
| border-image-slice | 设置或检索对象的边框背景图的分割方式 |
| border-image-width | 设置或检索对象的边框厚度 |
| border-image-outset | 设置或检索对象的边框背景图的扩展 |
| border-image-repeat | 设置或检索对象的边框图像的平铺方式 |
| border-radius | 设置或检索对象使用圆角边框 |
| border-top-left-radius | 设置或检索对象左上角圆角边框 |
| border-top-right-radius | 设置或检索对象右上角圆角边框 |
| border-bottom-right-radius | 设置或检索对象右下角圆角边框 |
| border-bottom-left-radius | 设置或检索对象左下角圆角边框 |
| box-shadow | 设置和检索对象阴影 |
1.边框颜色
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。border-color属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。
下列案例3-10所示，通过border-color设置边框颜色。
例3-10 example10.html
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p.one { border-style: solid;border-color: #0000f } p.two{border-style: solid;border-color: #ff0000 #0000ff} p.three{border-style: solid;border-color: #ff0000 #00ff00 #0000ff } p.four{border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p>One-colored border!</p> <p>Two-colored border!</p> <p>Three-colored border!</p> <p>Four-colored border!</p> <p><b>注释：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p> </body> </html> |
运行3-10，效果如图3-12所示。
图3-12 border-color设置边框的颜色
【六六互联】外贸抗投诉空间、抗投诉vps、抗投诉服务器
边框图片属性
