好看的css阴影样式
时间: 2023-08-19 16:17:27 浏览: 51
以下是几个好看的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好看的盒子阴影样式
可以使用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
font-family: Arial, sans-serif; /* 设置字体 */
font-size: 16px; /* 设置字体大小 */
font-weight: bold; /* 设置字体粗细 */
font-style: italic; /* 设置字体样式 */
```
2. 文本颜色和背景色:
```css
color: #333; /* 设置文本颜色 */
background-color: #f5f5f5; /* 设置背景颜色 */
```
3. 文本对齐方式:
```css
text-align: center; /* 居中对齐 */
text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */
```
4. 文本装饰:
```css
text-decoration: underline; /* 带下划线 */
text-decoration: line-through; /* 带删除线 */
text-decoration: none; /* 不带装饰 */
```
5. 行高:
```css
line-height: 1.5; /* 设置行高,可以是数字或者百分比 */
```
6. 字母间距和单词间距:
```css
letter-spacing: 1px; /* 设置字母间距 */
word-spacing: 5px; /* 设置单词间距 */
```
7. 文字阴影:
```css
text-shadow: 1px 1px 1px #ccc; /* 设置文字阴影,可以设置位置和颜色 */
```
以上是一些常用的 CSS 文字样式,你可以根据自己的需要进行调整。