css给一个圆四周加阴影 |thinkphp page.css

.round{
width: 150px;   /*设置圆形的宽度*/
height: 150px;  /*设置圆形的高度*/
border-radius: 50%;  /*将矩形元素变为圆形*/
background-color: #f6f7f9; /*设置圆形的背景色*/
box-shadow: 2px 2px 10px #888888; /*添加阴影效果*/
}

上述代码中，大家首先通过设置width和height，将矩形元素转化为圆形。然后利用border-radius属性，将圆角设置为50%，便可得到一个圆形。接着，设定背景色，以便更好地观察圆形。最后，利用box-shadow属性添加阴影效果。box-shadow属性值有以下几个参数：

• h-shadow： 水平阴影的位置，可以是正负值
• v-shadow： 垂直阴影的位置，可以是正负值
• blur： 模糊程度，可以为0（无模糊）
• spread： 阴影大小，可以为正数或者负数
• color： 阴影的颜色

在大家的代码中，大家使用了h-shadow为2px、v-shadow为2px、blur为10px，意味着阴影的位置和模糊程度。同时，spread为0，表示阴影大小不会产生辐射。最后的color值为 #888888，表示阴影的颜色。

以上就是利用CSS给一个圆四周添加阴影的具体实现方法。通过这种方式，大家可以更加生动形象地展现网页设计中的圆形元素，丰富用户的视觉体验。