css3更易操作的网页细节-box-shadow阴影
box-shadow的参数有六个:X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。x-offset:X轴偏移
阴影水平偏移量,其值可以是正负值,如果是正值则阴影在对象的右边,为负值则在左边。
y-offset:Y轴偏移
阴影上下偏移量,其值也可以为正负值,如果是正值,则阴影在对象的底部,为负值则在顶部。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
阴影模糊半径
此参数可选,为0时阴影不具有模糊效果,其值越大阴影边缘也就越模糊
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px;}
</style>
阴影扩展半径
此参数可选,其值为正值时,整个阴影面积都延展扩大,为负值时则缩小
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px;}
</style>
阴影颜色
此参数可选,如果不设定颜色,浏览器会取默认色,但各个浏览器默认取色不一样
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green;}
</style>
阴影类型
此参数可选,如不设值,默认投影方式是外投影,如取其唯一值“inset”,则投影为内投影
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green inset;}
</style>