css3系列之详解box-shadow

2024-09-24 08:17:25

box-shadow

box-shadow呢是设置元素的阴影效果的，利用这个属性，可以设计很多很炫丽的效果，不信？等下，学完，我们就来完成下面这两个效果

　　首先先了解一下，box-shadow 的一些参数：

box-shadow: inset 10px 10px 30px 0px #fff;

　　第一个参数：填了 inset 就是内阴影。不填就是外阴影，

外阴影就是在元素底下的阴影，内阴影是在元素里面的，出不去元素的。

　　第二个参数：向右偏移多少。负数向左。

　　第三个参数：向下偏移多少。负数向上。

　　第四个参数：阴影的模糊程度。不能填负数。

　　第五个参数：向外扩展多大。在阴影的宽高外，继续加大。如果填的是 10px 那么是宽高都加 10px 可以填负数，负数变小。

　　第六个参数：阴影的颜色。

　　

　　还有参数是可以叠加的。意思就是，你可以添加多个阴影组合，这个就看你怎么搭配了。

　　接下来先做个小太阳：

第一步：小太阳是从内往外扩散的光，所以先添加白色的外阴影。让它看起来不那么黄。

第二步，添加黄色的外阴影，继续扩散，阴影程度加大，阴影程度加越大，越淡。

第三步，再继续扩散阳光。

完成。

　　接下来完成第二个：

第一步加点白色的内阴影。为了有一种朦胧感，不要让其他颜色太强烈

第二步，加粉红色的内阴影，向右偏移 10px 为的目的的突出左边的粉红色。

第三步，加上相对于的蓝色。向左偏移10px，目的是：在右边突出蓝色

第四步，继续再加一层粉红色，加强一下效果。

第五步，继续再加一层蓝色。

第六步，加上白色的外阴影，添加朦胧感。

第七步和第八步差不多，也是向外边框的左右添加粉红色和蓝色。

最后，浏览器版本不同，出现的效果也是不一样的，自己调一下就好了

　　

最新文章

热门文章