上查看所有课程
CSS 边框用于在网页元素周围添加视觉边框。例如，
h1 {
border: 8px solid blue;
}浏览器输出
在这里，border 属性为 h1 元素添加了一个 8px 宽的 实线 蓝色 边框。
不同的边框相关属性
我们有以下常用的边框相关属性：
-
border-style：指定边框的样式 border-width：设置边框的宽度border-color：设置边框的颜色border：用于指定border-style、border-width和border color的简写属性border-radius：设置边框的圆角半径border-image：允许将图像用作边框
我们将简要地逐一介绍它们。
CSS border-style 属性
border-style 属性指定元素边框的外观。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-style</title>
</head>
<body>
<p class="solid">border-style: solid;</p>
<p class="dotted">border-style: dotted;</p>
<p class="dashed">border-style: dashed;</p>
</body>
</html>/* create a solid border */
p.solid {
border-style: solid;
}
/* create a dotted border */
p.dotted {
border-style: dotted;
}
/* create a dashed border */
p.dashed {
border-style: dashed;
}
p {
padding: 8px;
}浏览器输出
了解更多关于 border-style 属性。
CSS border-width 属性
border-width 属性为元素边框添加宽度或厚度。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-width</title>
</head>
<body>
<p class="first">border-width: 4px;</p>
<p class="second">border-width: 8px;</p>
</body>
</html>p {
padding: 8px;
border-style: solid;
}
p.first {
border-width: 4px;
}
p.second {
border-width: 8px;
}浏览器输出
了解更多关于 border-width 属性。
CSS border-color 属性
border-color 属性为元素边框添加颜色。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-color</title>
</head>
<body>
<p class="first">border-color: blue;</p>
<p class="second">border-color: orange;</p>
</body>
</html>p {
padding: 8px;
border-style: solid;
border-width: 6px;
}
p.first {
border-color: blue;
}
p.second {
border-color: orange;
}浏览器输出
了解更多关于 border-color 属性。
CSS 边框简写属性
简写的 border 属性允许我们在单个声明中指定 border-style、border-width 和 border-color 属性。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border Shorthand</title>
</head>
<body>
<h1>CSS border Shorthand Property</h1>
</body>
</html>h1 {
border: 8px solid blue;
/* equivalent to
border-style: solid;
border-color: blue;
border-width: 8px;
*/
}浏览器输出
了解更多关于 border 简写属性。
CSS 边框圆角属性
border-radius 属性通过添加半径来创建圆角边框。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-radius</title>
</head>
<body>
<h1>Some heading....</h1>
</body>
</html>h1 {
border: 8px solid blue;
/* adds 12px border radius */
border-radius: 12px;
padding: 8px;
background-color: skyblue;
}浏览器输出
了解更多关于 border-radius 属性。
CSS border-image 属性
border-image 属性用于将图像添加为元素的边框。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-image</title>
</head>
<body>
<h1>Some content....</h1>
</body>
</html>h1 {
/* adds a solid border, necessary for border-image property */
border: solid;
/* image url | slice width | border-width */
border-image: url("https://img.freepik.com/free-vector/abstract-retro-pattern-design-background_1048-16451.jpg?w=1380&t=st=1684150041~exp=1684150641~hmac=afe94e2ac7c5e40bc45c44a20d4b30c5ac4f6a983bf5c1c7a0957ef27658a3e3")
20 / 20px;
/* adds 20px padding */
padding: 20px;
}浏览器输出
了解更多关于 border-image 属性。