如何使用 CSS 创建和设置边框样式?

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

我们可以为元素定义边框并使用 CSS 为其设置样式。CSS border 属性用于定义元素的边框属性。它是 border-width、border-style 和 border-color 的简写。此外，还可以将图像指定为边框。

语法

CSS border 属性的语法如下 −

Selector {
   border: /*value*/
}

示例

以下示例演示了 CSS border 属性 −

<!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 70px solid transparent;
   margin: 15px;
   padding: 3px;
   border-image: url("https://www.cainiaomax.com/tensorflow/images/tensorflow.jpg") 30 round;
   background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
   margin: auto;
   width: 60%;
   border: 4px solid sienna;
   padding: 10px;
   background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
   border-radius: 55px 100px 2px 95px;
}
#d2 {
   border: 1.5px solid rosybrown;
   padding: 10px;
   border-radius: 205px 500px;
}
img {
   border-radius: 3% 50%;
   display: block;
   margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.cainiaomax.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html>