css3阴影效果代码怎么写

2019-12-23 10:59:30网站建设

在网页建设中常会用到给div等盒子对象添加css3阴影效果,通过css3阴影代码能突出一个元素,那么具体代码是什么呢,该怎么做呢?

一、比如我想给yy样式添加css3阴影

<div class=”yy”></div>

.yy {
width:100px;height:50px;
/* 只需要原样式基础上添加下面的3行就能有阴影效果 */
-moz-box-shadow:5px 8px 20px #333333;
-webkit-box-shadow:5px 8px 20px #333333;
box-shadow:5px 8px 20px #333333;
}

二、CSS阴影样式代码说明

box-shadow:水平偏移值(可取正负值) 垂直偏移值(可取正负值) 阴影模糊值 阴影颜色;
Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2px 5px #333333
webkit内核的Safari和Chrome支持Box Shadow(阴影):-webkit-box-shadow:2px 2px 5px #333333
Opera支持Box Shadow(阴影):box-shadow:2px 2px 5px #333333
IE不支持Box Shadow(阴影)

在使用时,需要根据实际情况对偏移值进行调整。

css3阴影效果代码怎么写相关