试一试
border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgb(211 220 50 / 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #ff3333;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;
border 属性可以用下面列出的一个、两个或三个值来指定。值的顺序无关紧要。
备注： 如果未定义边框样式，边框将不可见。这是因为样式的默认值为 none。
值
<line-width>-
设置边框的粗细。如果省略，则默认为
medium。见border-width。 <line-style>-
设置边框的样式。如果省略，则默认为
none。见border-style。 <color>-
设置边框的颜色。如果省略，则默认为
currentColor。见border-color。
描述
与所有简写属性一样，任何被省略的子值都将被设置为其初始值。重要的是，border 不能用于为 border-image 指定自定义值，而是会将其设置为其初始值，即 none。
当你希望所有四个边框都相同时，border 简写属性特别有用。但是，要使它们彼此不同，你可以使用普通（longhand）属性 border-width、border-style 和 border-color，它们接受每一边的不同值。或者，你可以使用物理（例如 border-top）和逻辑（例如 border-block-start）边框属性一次只针对一个边框。
边框与轮廓
边框和轮廓非常相似。然而，轮廓在以下方面与边框不同：
- 轮廓从不占用空间，因为它们绘制在元素内容之外。
- 根据规范，轮廓不一定是矩形的，尽管它们通常是。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter。 |
| 继承性 | 否 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
正式语法
border =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
设置一个粉色的浮雕边框
HTML
html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
CSS
css
div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |
浏览器兼容性
加载中…