border-right-width - CSS(层叠样式表) 编辑
CSS 的border-right-width
用来设置盒子右边框的宽度。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
/* Keyword values */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* <length> values */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* Global keywords */
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;
数值
<line-width>
- 定义边框的宽度,或者作为显性非负的长度值
<length>
或者是关键字。如果他是一个关键字,它必须是下列值的一种:thin
一个细边框 medium
一个中等边框 thick
一个粗边框 笔记: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式
thin ≤ medium ≤ thick
, 在单独文档中这些值内部是恒定不变的。
形式语法
<line-width>
例子
HTML
<div>Element 1</div>
<div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-right-width: thick;
}
div:nth-child(2) {
border-right-width: 2em;
}
结果
规格
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-right-width | Candidate Recommendation | 没有规格变化. |
CSS Level 2 (Revision 1) border-right-width | Recommendation | 没有规格变化. |
CSS Level 1 border-right-width | Recommendation | 最初的定义. |
初始值 | medium |
---|---|
适用元素 | all elements. It also applies to ::first-letter . |
是否是继承属性 | 否 |
计算值 | the absolute length or 0 if border-right-style is none or hidden |
Animation type | a length |
浏览器兼容性
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.其他
- The other border-width-related CSS properties:
border-bottom-width
,border-left-width
,border-top-width
, andborder-width
. - The other border-right-related CSS properties:
border
,border-right
,border-right-style
, andborder-right-color
.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论