CSS3边框学习笔记
1. 边框基础
CSS3允许我们对元素的边框进行更精细的控制。边框由边框线、边框样式和边框颜色组成。下面是一些基本的边框样式：
cssCopy Codediv {
border-style: solid;
border-width: 2px;
border-color: black;
}
上述代码将创建一个黑色的、宽度为2像素的实线边框。
2. 边框样式
除了实线边框，CSS3还支持多种边框样式，如虚线、点状线等。下面是一些常见的边框样式：
cssCopy Codediv {
border-style: solid; /*实线*/
border-style: dotted; /*点状线*/
border-style: dashed; /*虚线*/
border-style: double; /*双实线*/
}
3. 边框圆角
使用CSS3，我们可以轻松地为元素的边框添加圆角。下面的代码将创建带有25像素半径圆角的边框：
cssCopy Codediv {
border-radius: 25px;
}
如果您想为四个角设置不同的半径，请使用以下代码：
cssCopy Codediv {
border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-right-radius: 75px;
border-bottom-left-radius: 100px;
}
4. 边框阴影
CSS3还支持为元素的边框添加阴影。下面是如何创建一个带有阴影的边框：
cssCopy Codediv {
box-shadow: 10px 10px 5px grey;
}
上述代码将创建一个向右和向下偏移10像素的灰色阴影。第一个参数控制水平偏移，第二个参数控制垂直偏移，第三个参数控制模糊半径，第四个参数控制阴影颜色。
5. 实例
以下是一个实例，它演示了如何为元素创建带有多种边框属性的样式：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>CSS3边框学习笔记</title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
background-color: #f8f8f8;
border-width: 2px;
border-style: dotted;
border-color: #999;
border-radius: 10px;
box-shadow: 5px 5px 5px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在上面的例子中，我们定义了一个名为“box”的类，它具有2像素宽的点状线边框、灰色阴影和圆角。在HTML中，我们创建了一个div元素，并将其类设置为“box”。