css制作一个圆圈阴影
时间: 2023-08-19 10:52:52 浏览: 196
可以使用CSS的box-shadow属性来为圆圈添加阴影效果。以下是一个简单的示例代码:
```css
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
```
在上面的代码中,我们创建了一个宽高为100px的圆圈,并设置了50%的边框半径使其变成一个圆形。背景颜色为红色(#f00),而box-shadow属性用于添加阴影效果。阴影的水平和垂直偏移量都设置为0px,模糊半径为10px,颜色为黑色(rgba(0, 0, 0, 0.5))。
你可以将上述代码应用到你的HTML元素中,例如:
```html
<div class="circle"></div>
```
这样就可以在页面中创建一个带有圆形阴影效果的红色圆圈了。你可以根据需要调整圆圈的大小、颜色和阴影效果。
阅读全文