border-right
试一试
与所有简写属性一样,border-right
始终设置其可以设置的所有属性的值,即使这些属性未指定。它将未指定的属性设置为其默认值。考虑以下代码
css
border-right-style: dotted;
border-right: thick green;
它实际上与以下代码相同
css
border-right-style: dotted;
border-right: none thick green;
在 border-right
之前给出的 border-right-style
值将被忽略。由于 border-right-style
的默认值为 none
,因此不指定 border-style
部分会导致没有边框。
构成属性
此属性是以下 CSS 属性的简写
语法
css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
/* Global values */
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;
简写属性的三个值可以按任何顺序指定,并且可以省略其中一个或两个。
值
正式定义
初始值 | 与简写属性的每个属性相同
|
---|---|
应用于 | 所有元素。它也适用于 ::first-letter 。 |
继承 | 否 |
计算值 | 与简写属性的每个属性相同
|
动画类型 | 与简写属性的每个属性相同 |
正式语法
示例
应用右侧边框
HTML
html
<div>This box has a border on the right side.</div>
CSS
css
div {
border-right: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
结果
规范
规范 |
---|
CSS 背景和边框模块级别 3 # border-shorthands |
浏览器兼容性
BCD 表格仅在浏览器中加载