盒子阴影
- 如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
注意点:
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: yellow;
margin: 100px auto;
box-shadow: 10px 10px 10px;
color: greenyellow;
}
</style>
<div></div>
文字阴影
- 如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
阴影默认颜色和文字颜色一致
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 100px;
height: 100px;
font-size: 100px;
margin: 150px auto;
text-shadow: 10px 10px 10px green;
color: #4f93ea;
}
</style>
<p>我是文字</p>
