css好看的盒子阴影样式
时间: 2023-08-19 17:14:50 浏览: 86
可以使用CSS的box-shadow属性来为盒子添加阴影样式。下面是一些常见的好看的盒子阴影样式示例:
1. 内阴影效果:
```css
.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
```
2. 外阴影效果:
```css
.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
```
3. 多层次阴影效果:
```css
.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),
0 0 20px rgba(0, 0, 0, 0.2),
0 0 30px rgba(0, 0, 0, 0.1);
}
```
4. 阴影边框效果:
```css
.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
inset 0 0 10px rgba(255, 255, 255, 0.5);
}
```
你可以根据自己的需求调整阴影的颜色、大小、模糊度和偏移量来创建更多不同样式的盒子阴影效果。
相关问题
好看的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]
你可以根据需要选择其中一个样式或者根据自己的喜好进行修改。
css在盒子外设置阴影
可以使用box-shadow属性在盒子外设置阴影。例如:
```css
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
```
这个样式将在盒子周围添加一个10像素宽的黑色半透明阴影。其中,第一个参数是水平偏移量,第二个参数是垂直偏移量,第三个参数是模糊半径,第四个参数是颜色和透明度。可以根据需要调整这些值来创建不同的阴影效果。