css中怎么给边框添加阴影效果图

CSS 可以通过 box-shadow 属性来为元素添加阴影，进而为边框添加阴影效果。

 /* 语法 */
  box-shadow: h-shadow v-shadow blur spread color inset;

  /* 示例 */
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5); 

其中，各属性的含义如下：

• h-shadow：表示水平方向上的阴影位置，可以是正数、负数、0。
• v-shadow：表示竖直方向上的阴影位置，可以是正数、负数、0。
• blur：表示阴影的模糊程度，数值越大，则越模糊。
• spread：表示阴影的扩散程度，数值越大，则占用的空间越大。
• color：表示阴影的颜色。可以是具体的颜色值，也可以是 RGB、RGBA、HSL、HSLA 等颜色格式。
• inset：可选，表示阴影为内阴影，如果不写，则默认为外阴影。

示例代码如下：

 .box {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
  } 

上述代码中，添加了 2px 2px 的外阴影，模糊程度为 5px，扩散程度为 2px，颜色为半透明黑色。