Java-CSS边框

最新推荐文章于 2024-02-19 11:25:21 发布

树叶过河 Z

最新推荐文章于 2024-02-19 11:25:21 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

文章标签： Java-CSS边框

本文链接：https://blog.csdn.net/weixin_44823057/article/details/93461274

博客主要介绍了CSS边框属性，包括边框样式、宽度、颜色及简写方式。边框样式用border-style定义，宽度用border-width指定，颜色用border-color设置，且宽度和颜色属性需先设置边框样式才生效。还介绍了边框简写的不同形式及同时设置颜色、粗细和样式的方法。

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

CSS边框属性允许你指定一个元素边框的样式和颜色

边框样式

边框样式属性指定要显示什么样的边界；border-style属性用来定义边框的样式

属性	说明
border-style：none	默认无边框
border-style：dotted	定义一个点线边框
border-style：dashed	定义一个虚线边框
border-style：solid	定义实线边框
border-style：double	定义两个边框；两个边框的宽度和 border-width 的值相同
border-style：groove	定义3D沟槽边框；效果取决于边框的颜色值
border-style：ridge	定义3D脊边框；效果取决于边框的颜色值
border-style：inset	定义一个3D的嵌入边框；效果取决于边框的颜色值
border-style：outset	定义一个3D突出边框。效果取决于边框的颜色值

属性	说明
border-top-style	设置元素的上边框的样式
border-bottom-style	设置元素下边框样式
border-right-style	设置元素右边框样式
border-left-style	设置元素左边框样式

边框宽度

可以通过 border-width 属性为边框指定宽度
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin

属性	说明
border-top-width	设置元素上边框宽度
border-bottom-width	设置元素下边框宽度
border-right-width	设置元素右边框宽度
border-left-width	设置元素左边框宽度

注意：border-width 属性如果单独使用则不起作用；要先使用 border-style 属性来设置边框；先设置边框样式再设置边框粗细。

边框颜色

border-color属性用于设置边框的颜色

属性	说明
border-top-color	设置元素上边框颜色
border-bottom-color	设置元素下边框颜色
border-right-color	设置元素右边框颜色
border-left-color	设置元素左边框颜色

注意： border-color 单独使用是不起作用的，必须得先使用border-style来设置边框样式。

边框简写

border-style/color/width：属性1，属性2，属性3，属性4
上->右->下->左
border-style/color/width：属性1，属性2，属性3
上->左右->下
border-style/color/width：属性1，属性2
上下->左右
border-style/color/width：属性1
上下左右属性相同