盒子阴影-box-shadow

H5很是花哨,让现代网页看起来更加绚丽多彩,也让互联网的发展更加的有趣,更加的人性化、艺术化。

盒子阴影-box-shadow;

1,为了让盒子看起来更加的漂亮,看起来很舒适。加个阴影是最好的了。

box-shadow:阴影方式(insert or 默认),X轴(-0+),y轴(-0+),模糊系数,颜色(rgba());

2、研究了一下这个阴影大小实际以盒子的大小为基数,在盒子下面,可以在平面上下左右移动。控制位置就是改变X,Y轴的方向和大小。

注意:为了浏览器的识别度更加精准,要加前缀。-webkit-box-shadow,-moz-box-shadow,box-shadow。

单边,三边1px 0 10px rgba(),0 0 0 10px rgba(),0 0 0 10px rgba(),,四边,0 0 0 10px rgba(),

不管是设置单边还是多边,其他边都会有有少许的阴影。所以,要确保其他边不受影响,要注意一点,我今天做的是三边的,左右下,

网上的写法是分四种,那个是针对不同颜色的上下左右阴影。我写的

样式如下:{

-1px 2px 5px rgba();

1px 2px 5px rgba();

/*完全影响不到上面的边框阴影*/

}


猜你喜欢

转载自blog.csdn.net/qq_39241421/article/details/73498758
今日推荐