使用boxshadow添加边框

使用box-shadow属性可以添加边框效果。在CSS中，可以通过设置box-shadow属性的值来定义边框的样式。例如，可以使用以下代码添加一个带有阴影效果的边框：

div {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}

在上述代码中，box-shadow属性的值由四个参数组成：水平偏移量、垂直偏移量、模糊半径和阴影扩展半径。通过调整这些参数的值，可以实现不同的边框效果。在这个例子中，边框的颜色为黑色，模糊半径为5px，阴影扩展半径为2px。

另外，还可以使用逗号分隔多个box-shadow值，以创建多层边框效果。例如：

div {
  width: 200px;
  height: 200px;
  box-shadow: 
    0 0 5px 2px rgba(0, 0, 0, 0.5),
    0 0 10px 4px rgba(255, 0, 0, 0.5);
}

在这个例子中，div元素将同时具有两个边框效果，一个是黑色的边框，另一个是红色的边框。每个box-shadow值之间使用逗号分隔。

综上所述，使用box-shadow属性可以通过设置不同的参数值来添加边框效果，并且可以通过逗号分隔多个box-shadow值来创建多层边框效果。\[1\]\[2\]
#### 引用[.reference_title]
- *1* *2* *3* [CSS的box-shadow创建边框](https://blog.csdn.net/weixin_45221036/article/details/106997247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]