15900627980

有了box-shadow,就不用再用PS做图片阴影了

发布于:11-19
盒阴影,即box-shadow,它是用来向边框添加一个或多个阴影。



先看案例,这里为div标签设置box-shadow属性值,产生的阴影效果如下图所示。

<style type="text/css">
div
{
  width:300px;
  height:100px;
  background-color:yellow;
  box-shadow: 10px 10px 5px #888888;
}
</style>
</head>

<body>
<div></div>
</body>
 

有了box-shadow,就不用再用PS做图片阴影了



语法:

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow表示水平阴影的位置,可以是负值,如果是负值,阴影在水平方向上则向左偏移;

v-shadow表示垂直阴影的位置,也可以是负值,负值表示垂直向上的阴影;

blur表示模糊半径,为零或忽略时阴影没有模糊效果;

spread表示阴影扩展尺寸;

color表示阴影的颜色;

inset表示内部阴影,缺省值是outset,即常见的外部阴影。



上面案例的对应关系是(看颜色):

box-shadow:h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px #888888;



盒阴影也可以设置多个阴影列表,用逗号隔开多组值。

这四组水平和垂直阴影偏移量都为零,模糊半径也为零,但是设置不同的逐渐增大的扩展半径及不同颜色值,这样便形成了类似多个边框的效果。

div
{
  margin:50px;
  width:300px;
  height:100px;
  background-color:yellow;
  box-shadow:0 0 0 10px #03F,
         0 0 0 20px #0066FF,
         0 0 0 30px #0099FF,
         0 0 0 40px #00CCFF;
}

有了box-shadow,就不用再用PS做图片阴影了

阴影 负值 颜色 10 半径 垂直 88888 也可以 属性 效果

上一篇:我们的网站拿来干嘛用的?展示信息?NO!

下一篇:返回列表

相关内容 观察行业视觉,用专业的角度,讲出你们的心声。
Back

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2020 沪ICP备20008988号-2