盒子陰影
- 如何給盒子添加陰影
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;
注意點(diǎn):
2.1盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
2.2快速添加陰影只需要編寫(xiě)三個(gè)參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
<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: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
陰影默認(rèn)顏色和文字顏色一致
<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>
