DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!
border
属性是 CSS 中的简写语法,它接受多个值用于在应用它的元素周围绘制线条。
.belement{
border: 3px solid red;
width: 200px;
aspect-ratio: 1;
}
语法
border: <line-width> || <line-style> || <color>
值
border
属性接受以下一个或多个值的组合
border-width
:指定边框的厚度。- : 一个用
px
、em
、rem
、vh
和vw
单位测量的数值。 thin
: 等效于1px
medium
: 等效于3px
thick
: 等效于5px
- : 一个用
border-style
:指定围绕元素绘制的线类型,包括solid
: 一条实线。none
(默认值):不绘制任何线条。hidden
: 绘制一条线,但不可见。这对于在不显示边框的情况下为元素添加一些额外宽度非常有用。dashed
: 一条由虚线组成的线。dotted
: 一条由点组成的线。double
: 在元素周围绘制两条线。groove
: 根据颜色值添加一个斜角,使元素看起来压入文档中。ridge
: 与groove
类似,但反转颜色值,使元素看起来突出。inset
: 向线添加一个分色调,使元素看起来稍微凹陷。outset
: 与inset
类似,但反转颜色,使元素看起来稍微突出。
border-color
: 指定边框的颜色,并接受所有有效的颜色值。
哇,一个属性有这么多值!以下是一个演示,它说明了所有这些样式值之间的差异
组成属性
border
属性是以下与边框相关的属性的简写
物理属性 | 逻辑属性 |
---|---|
border-top | border-block-start |
border-bottom | border-block-end |
border-left | border-inline-start |
border-right | border-inline-end |
所以,这个
.element {
border: 3px solid #f8a100;
}
…与…相同
.element {
border-top: 3px solid #f8a100;
border-right: 3px solid #f8a100;
border-bottom: 3px solid #f8a100;
border-left: 3px solid #f8a100;
}
…或者 逻辑等效
.element {
border-block-start: 3px solid #f8a100;
border-inline-end: 3px solid #f8a100;
border-block-end: 3px solid #f8a100;
border-inline-start: 3px solid #f8a100;
}
由于一些逻辑属性有自己的简写,我们可以只在 块
或 内联
方向声明边框。
.element {
/* The top (start) and bottom (end) borders */
border-block: 3px solid #f8a100;
/* The left (start) and right (end) borders */
border-inline: 3px solid #f8a100;
}
浏览器支持
您可以依靠所有浏览器对 border
属性的出色支持。
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
是 | 是 | 是 | 3.5+ | 4+ | 是 | 是 |
更多信息
相关
border-block
.element { border-block: 5px solid #f8a100; }
border-boundary
.element { border-boundary: display; }
border-collapse
.element { border-collapse: separate; }
border-image
.element { border-image: url(border.png) 25 25 round; }
border-inline
.element { border-inline: 5px solid #f8a100; }
border-radius
.element { border-radius: 10px; }
border-spacing
.element { border-spacing: 5px; }
还有更多关于边框的内容吗?
border-radius,…
border-radius 是一个不同的属性,它不包含在简写
border
中,但如果你正在寻找它,你也可以在年鉴中找到它:https://css-tricks.org.cn/almanac/properties/b/border-radius/嗨,克里斯,
希望看到这里可用的边框样式属性列表。相信这会很有帮助。
另外,你对这些样式的见解/意见。我经常看到 solid, dotted, dashed,但没有看到其他样式……它们过时了吗?……它们是否被弃用?
一切顺利,
约翰
你想要和谁说话,克里斯?
这个网站真的很棒,但我同意约翰的观点,其他样式 hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 怎么办?
为什么不包括它们。
感谢你的帮助。当我在编写代码时遇到问题时,这个网站就很有用。
这真的非常有帮助,谢谢你们。
我想要为我的 border-bottom 添加一个阴影。请帮忙。
大家好,谢谢你的联系!
border
和box-shadow
都是应用于元素的属性。它们一起工作得很好。:)例如,你可以在一个盒子上面有一个橙色的底部边框,然后在上面应用一个深色盒子阴影。
.my-element {
height: 100px;
width: 100px;
border-bottom: orange;
box shadow: 3px 3px 3px #000; /* 设置一个黑色阴影在右侧和底部,并轻微模糊 */
}
嘿,莎拉,感谢你撰写这篇文章。你是否知道,有没有可能为边框添加高度属性?就像 https://prnt.sc/uiprv7
我想在我的网站上为边框添加一个渐变色。有人知道怎么做吗?
嗨,大家。我想知道是否可以用纯 CSS 在边框内使用百分比颜色?比如 3 种颜色分开……2% 红色,7% 绿色,91% 灰色。类似这样,但不是渐变。就像进度……
我必须问,第一个例子不应该是一个正方形吗?
(不是吹毛求疵,只是困惑)
我想知道你是怎么改变右侧滚动条的外观的。
你好,
我正在尝试使用双边框。
如何以不同的方式指示线条的厚度和间距?
我在网上搜索了,只找到一个链接,上面写着“border-double-thickness”,但它只在线上应用。
我一直搜索“border-double-thickness”,但没有找到任何东西。
这是链接
https://www.antennahouse.com/hubfs/xsl-fo-sample/block/axf-border-double-thickness-1.pdf?hsLang=en#
你知道如何指示怎么做吗?
谢谢
你好,
我正在探索 CSS 属性中的边框,发现了一件没有绝对解决方案的事情。当我为一个元素赋予边框属性,并带有某些值时,
例如
元素的四边实际上并没有占用 2px,而是只占用了 1.6px。剩余的 0.4px 到哪里去了?