当前位置:酷酷问答>百科知识>css3中阴影怎么运用

css3中阴影怎么运用

2024-09-24 13:24:20 编辑:zane 浏览量:545

css3中阴影怎么运用

的有关信息介绍如下:

css3中阴影怎么运用

我们日常在写页面的时候,经常会为了增加网页效果给图片或者文字增加阴影效果,那么阴影到底应该怎么设置呢?

首先我们在运用这个属性的时候,要明白其到底具备那些功能,在css3中box-shadow共有6个属性,分别如下所示:

h-shadow必需。水平阴影的位置。允许负值。

v-shadow必需。垂直阴影的位置。允许负值。

blur可选。模糊距离。

spread可选。阴影的尺寸。

color可选。阴影的颜色。请参阅 CSS 颜色值。

inset可选。将外部阴影 (outset) 改为内部阴影。

这些我们在运用的时候可以针对性进行选择设置。不需要的就不要加上。

四边阴影都在外部显示出来,代码如下:

.test001 {

box-shadow: 0 0 10px #333;

width: 100px;

height: 100px;

margin: 30px 30px 60px 60px;

}

这种会对四边都进行一个阴影的展示,在box-shadow里面可以对阴影的颜色进行一个设置。

四边阴影都在内部显示出来,代码如下:

.test002 {

box-shadow: 0px 0px 10px #666 inset;

width: 60px;

height: 60px;

margin: 30px 30px 60px 60px;

}

相对于上面的写法,如果我们需要在内部进行一个阴影展示的话,就需要在box-shadow里面加上一个insert来进行一个标识,这样才可以将阴影展现出来,如果不加的话则是默认在外部显示。

两边阴影显示出来,代码如下:

.test003 {

box-shadow: 6px 6px 10px #999;

width: 60px;

height: 60px;

margin: 30px 30px 60px 60px;

}

如果我们不需要四边的阴影都可以看见的话,还可以设置为两边进行显示,通过对box-shadow的边距进行一个设置,这样就可以看出来。

两边阴影显示出来,代码如下:

.test004 {

box-shadow: -10px 0px 10px #f00, 0px -10px 10px #0f0, 10px 0px 10px #00f, 0px 10px 10px #ff0;

width: 60px;

height: 60px;

margin: 30px 30px 60px 60px;

}

当我们需要对四边都进行一个设置的时候,就需要对四边的内容都进行一个设置,可以对其边距大小,阴影颜色等等都进行一个设置。这样就可以显示出你想要的样式了

版权声明:文章由 酷酷问答 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.kukuwd.com/article/49798.html
热门文章