网站建设资讯

NEWS

网站建设资讯

探索盒子阴影box-shadow-创新互联

盒子阴影之探索

创新互联是一家专注于成都网站设计、网站制作与策划设计,灵宝网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:灵宝等地区。灵宝做网站价格咨询:18982081108

盒子阴影:box-shadow

作用;在盒子不同的方位添加你想要的阴影效果。

box-shadow有六个参数值,下面一一举例说明

语法:

Box-shadow: offset-x | offset-y | blur | sperd | color| position |

 注意!!!以上也是box-shadow默认的排序!

第一:offset-x

阴影的水平偏移量,即X轴上阴影的位置,正值出现在元素的右侧负值在左侧。

当为正值代码:

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 20px 0px 10px 10px red;

}

运行结果:

探索盒子阴影box-shadow

当为负值代码:

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: -20px 0px 10px 10px red;

}

运行结果:

探索盒子阴影box-shadow

第二:offset-y

阴影垂直偏移量,即y轴上的阴影位置,正值是使阴影出现在元素的下方,负值出现在元素上方。

当为正值代码

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px 20px 10px 10px red;

margin: 0px auto;

}

探索盒子阴影box-shadow

当为负值代码

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px -20px 10px 10px red;

margin: 0px auto;

}

探索盒子阴影box-shadow

第三:blur

阴影的模糊半径,值越大越显得越模糊不清,一下为对比

当值为0时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 20px red;

}

探索盒子阴影box-shadow

当值为10时的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

探索盒子阴影box-shadow

当值为30时的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

探索盒子阴影box-shadow

第四:阴影的尺寸

数值越大距离边框的距离越远

当值为10px时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 10px red;

}

探索盒子阴影box-shadow

当值为50px时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px red;

}

探索盒子阴影box-shadow

第五:阴影的颜色

把红色换成蓝色

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px blue;

}

探索盒子阴影box-shadow

第六:position

默认值为外部阴影,一般情况下这个值不会给出,如果需要内部阴影在后面加上inset即可!

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue inset;

}

探索盒子阴影box-shadow

默认值时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue;

}

探索盒子阴影box-shadow

当然阴影的形状是跟随盒子的变化而变化的,当为圆形盒子时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

border-radius:50% ;

box-shadow: 20px 20px 10px 10px blue;

}

探索盒子阴影box-shadow

多重阴影

box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset,20px 20px 10px 0px rgba(0,0,0,0.5);

}

探索盒子阴影box-shadow

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:探索盒子阴影box-shadow-创新互联
网站网址:http://cdweb.net/article/jjsds.html