1. CSS设置边框阴影
边框和阴影是CSS中常用的样式效果，可以用来增强元素的外观和可读性。本文将介绍如何使用CSS来设置边框和阴影效果。
1.1 边框样式
在CSS中，可以使用border属性来设置元素的边框样式。边框样式可以分为以下几种：
实线边框：使用solid值来设置实线边框，可以通过设置border-width属性来控制边框的粗细。例如：
.border-solid {
border: 1px solid black;
}
虚线边框：使用dashed值来设置虚线边框，同样也可以通过设置border-width属性来控制边框的粗细。例如：
.border-dashed {
border: 1px dashed black;
}
还可以使用其他的边框样式，如dotted（点线边框）、double（双线边框）等，根据需要选择合适的样式。
1.2 设置边框颜色
CSS中使用border-color属性来设置边框的颜色。可以直接使用颜色值，也可以使用预定义的颜色名称或者RGB值。例如：
.border-color {
border: 1px solid red;
}
还可以为不同的边框设置不同的颜色。例如：
.border-color-multiple {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
1.3 设置边框圆角
在某些情况下，我们可能需要为元素的边框设置圆角，以使其外观更加柔和。CSS中使用border-radius属性来设置边框的圆角。例如：
.border-radius {
border: 1px solid black;
border-radius: 5px;
}
通过设置border-radius属性的值，可以控制圆角的大小。这个属性也支持设置不同的值，以实现不同的圆角效果。
2. 设置阴影效果
CSS中可以使用box-shadow属性来为元素添加阴影效果。该属性的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
其中，h-shadow和v-shadow分别表示水平和垂直偏移量，blur表示模糊半径，spread表示阴影的尺寸扩展量，color表示阴影的颜色，inset表示是否将阴影设置为内阴影。
2.1 设置常见的阴影效果
以下是一些常见的阴影效果示例：
2.1.1 内阴影
我们可以通过将inset设置为true来实现内阴影效果。例如：
.box-shadow-inset {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
上面的代码将为元素添加一个内阴影效果，阴影颜色为黑色，模糊半径为5px，显示的尺寸为2px。
2.1.2 外阴影
外阴影是默认的阴影效果，我们不需要设置额外的参数来实现。例如：
.box-shadow {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
上面的代码将为元素添加一个外阴影效果，阴影颜色为黑色，模糊半径为5px，显示的尺寸为2px。
2.1.3 多重阴影
我们可以为元素添加多个阴影效果，并通过逗号分隔每个阴影效果的设置。例如：
.box-shadow-multiple {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
上面的代码将为元素添加两个阴影效果，一个是淡灰色的内阴影，另一个是较浅的外阴影。
3. 总结
通过CSS的border和box-shadow属性，我们可以轻松地为元素添加边框和阴影效果。边框样式可以根据需要选择合适的样式、颜色和圆角效果，而阴影效果则可以通过调整参数来实现不同的效果。这些样式效果可以用于美化页面元素，提升用户体验。