1. 前言
CSS中的边框和阴影效果是很实用的效果，能使页面元素更美观。边框和阴影同时使用能让页面元素更立体感，给用户带来更好的体验。本文将介绍如何使用CSS设置边框阴影效果，让页面看起来更加丰富和生动。
2. 边框效果
2.1 边框样式
边框样式包括实线边框、虚线边框、双线边框、点线边框等，可以通过CSS中的border-style属性来设置边框样式。
/* 实线边框 */
border-style: solid;
/* 虚线边框 */
border-style: dashed;
/* 双线边框 */
border-style: double;
/* 点线边框 */
border-style: dotted;
同时，我们还可以通过设置其它CSS属性，例如宽度、颜色等来进一步美化边框样式。
2.2 边框宽度
边框宽度可以通过CSS中的border-width属性来设置。默认情况下，边框宽度为1像素。
/* 边框宽度为2像素 */
border-width: 2px;
/* 上下左右边框宽度分别为1像素、2像素、3像素、4像素 */
border-width: 1px 2px 3px 4px;
/* 上下、左右边框宽度分别为1像素、2像素 */
border-width: 1px 2px;
2.3 边框颜色
边框颜色可以通过CSS中的border-color属性来设置。
/* 边框颜色为红色 */
border-color: red;
/* 上下左右边框颜色分别为红色、绿色、蓝色、黑色 */
border-color: red green blue black;
/* 上下、左右边框颜色分别为红色、绿色 */
border-color: red green;
3. 阴影效果
3.1 盒子阴影
在CSS中，我们可以使用box-shadow属性添加盒子阴影效果。box-shadow属性的语法如下：
/* 水平偏移量 | 垂直偏移量 | 阴影颜色 */
box-shadow: 2px 2px #888;
/* 水平偏移量 | 垂直偏移量 | 模糊距离 | 阴影颜色 */
box-shadow: 2px 2px 2px #888;
/* 水平偏移量 | 垂直偏移量 | 模糊距离 | 扩散距离 | 阴影颜色 */
box-shadow: 2px 2px 2px 2px #888;
重要提示：box-shadow属性的使用需要注意浏览器兼容性，需要在添加厂商前缀的情况下使用。
3.2 文字阴影
在CSS中，我们可以使用text-shadow属性添加文字阴影效果。text-shadow属性的语法如下：
/* 水平偏移量 | 垂直偏移量 | 模糊距离 | 阴影颜色 */
text-shadow: 2px 2px 2px #888;
重要提示：和box-shadow属性一样，text-shadow属性的使用也需要注意浏览器兼容性，需要在添加厂商前缀的情况下使用。
4. 边框和阴影效果的组合使用
边框和阴影效果的组合使用可以让页面元素更美观和立体感强。下面是一些组合实例。
/* 添加实线边框和文字阴影效果 */
border: 1px solid #ccc;
text-shadow: 1px 1px #888;
/* 添加虚线边框和盒子阴影效果 */
border: 1px dotted #ccc;
box-shadow: 2px 2px #888;
/* 添加双线边框和盒子阴影效果 */
border: 3px double #ccc;
box-shadow: 2px 2px 2px #888;
/* 添加点线边框和盒子阴影效果 */
border: 1px dotted #ccc;
box-shadow: 2px 2px 2px #888;
5. 总结
CSS中的边框和阴影效果多样化，而且可以灵活组合使用。通过使用边框和阴影效果，我们可以让页面元素更加美观和立体感强，从而提高用户体验。