CSS 边框属性

cssweb developmentfront end technology更新于 2025/1/5 1:48:17

CSS 边框属性用于定义元素的边框属性。它是 border-width、border-style 和 border-color 的简写。我们可以使用特定于边框的属性(例如 border-top、border-right 等)来设置各个边框的样式。

语法

CSS 边框属性的语法如下 −

Selector {
   border: /*value*/
}

示例

以下示例演示了 CSS 边框属性 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   border-style: solid;
   margin: auto;
   padding: 5px;
   border-radius: 50%;
}
#main {
   height: 100px;
   width: 100px;
   border-left: 12px ridge goldenrod;
   border-right: 12px ridge goldenrod;
}
#main > div {
   line-height: 12px;
   height: 30px;
   width: 10px;
   padding: 27px 20px;
   border-top: 6px groove crimson;
   border-bottom: 6px ridge crimson;
}
</style>
</head>
<body>
<div id="main">
<div>i see you</div>
</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
p {
   width: 60%;
   margin: auto;
   padding: 20px 45px;
   border-top-width: 1.4em;
   border-top-style: solid;
   border-top-color: violet;
   border-radius: 85px 85px 0 0;
   color: black;
   font-size: 1.3em;
   background-image: url("https://www.cainiaomax.com/images/css.png");
}
</style>
</head>
<body>
<p>CSS is used to control the style of a web document in a simple way. It handles the look and feel part of a web page.</p>
</body>
</html>