好看的css阴影样式
时间: 2023-08-19 09:17:27 浏览: 89
漂亮的CSS阴影动效设计
以下是几个好看的CSS阴影样式:
1. 盒子阴影样式:
```css
.box {
position: relative;
width: 300px;
height: 300px;
background-color: rgb(254, 211, 48);
box-shadow: 0 0 10px 5px white, 0 0 80px grey, 0 20px 100px black;
}
```
这个样式给盒子添加了三层阴影效果,分别是白色、灰色和黑色。[2]
2. 文字阴影样式:
```css
.box {
position: relative;
width: 300px;
height: 300px;
background-color: rgb(254, 211, 48);
}
h1 {
text-shadow: -7px -7px 4px #666;
}
```
这个样式给文字添加了一个向左上方偏移的阴影效果。[3]
你可以根据需要选择其中一个样式或者根据自己的喜好进行修改。
阅读全文