css3阴影渐变 |css3动画效果大全有哪些

/* 阴影渐变属性设置 */
div{
/* 语法：box-shadow: h-shadow v-shadow blur spread color inset; */
box-shadow: 0 0 10px 0 #000 inset;
/* 语法：background: linear-gradient(direction, color-stop1, color-stop2, ...); */
background: linear-gradient(to bottom right, #000, #fff);
}

其中，box-shadow属性可以为元素添加一个渐变的黑色内阴影。语法格式为box-shadow: h-shadow v-shadow blur spread color inset; 其中h-shadow和v-shadow分别表示阴影的水平和垂直偏移量；blur表示阴影的模糊程度；spread表示阴影的扩展程度；color表示阴影的颜色；inset表示阴影是否内嵌。

而background属性则可以为元素添加一个颜色渐变，其中linear-gradient表示渐变类型，to bottom right表示渐变方向，#000表示起始颜色，#fff表示结束颜色。

总的来说，阴影渐变的实现并不复杂，只要掌握好上述两个属性的使用方法即可。想要打造出更加立体感的网页，不妨试试添加阴影渐变吧。