CSS 中的 border 简写属性

cssweb developmentfront end technology更新于 2025/1/6 20:28:17

border 属性用于定义元素的边框属性。它是 border-width、border-style 和 border-color 的简写。

语法

CSS border 属性的语法如下 −

Selector {
   border: /*value*/
}

示例

以下示例说明了 CSS border 属性 −

<!DOCTYPE html>
<html>
<head>
<style>
img {
   margin-top: 14px;
   margin-left: 30px;
   border: 2px solid orange;
   box-shadow: 0 0 12px 1px black;
}
#demo {
   border: 4px dotted magenta;
}
</style>
</head>
<body>
<img src="https://www.cainiaomax.com/swing/images/swing-mini-logo.jpg">  
<img id="demo" src="https://www.cainiaomax.com/scala/images/scala-mini-logo.jpg">
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: 1em;
   border: 3px dashed green;
}
td {
   font-size: 24px;
   border: 2px double navy;
}
</style>
</head>
<body>
<table>
<tr>
<td>This</td>
<td>text</td>
</tr>
<tr>
<td>is</td>
<td>demo</td>
</tr>
</table>
</body>
</html>