探索盒子阴影box-shadow-创新互联
盒子阴影之探索
盒子阴影：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;
}
运行结果：
当为负值代码：
div
{
width: 200px;
height: 200px;
background: yellow;
box-shadow: -20px 0px 10px 10px red;
}
运行结果：
第二：offset-y
阴影垂直偏移量，即y轴上的阴影位置，正值是使阴影出现在元素的下方，负值出现在元素上方。
当为正值代码
div
{
width: 200px;
height: 200px;
background: yellow;
box-shadow: 0px 20px 10px 10px red;
margin: 0px auto;
}
当为负值代码
div
{
width: 200px;
height: 200px;
background: yellow;
box-shadow: 0px -20px 10px 10px red;
margin: 0px auto;
}
第三：blur
阴影的模糊半径，值越大越显得越模糊不清，一下为对比
当值为0时
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 0px 20px red;
}
当值为10时的模糊程度
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 10px 20px red;
}
当值为30时的模糊程度
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 10px 20px red;
}
第四：阴影的尺寸
数值越大距离边框的距离越远
当值为10px时
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 0px 10px red;
}
当值为50px时
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 0px 50px red;
}
第五：阴影的颜色
把红色换成蓝色
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 0px 0px 0px 50px blue;
}
第六：position
默认值为外部阴影，一般情况下这个值不会给出，如果需要内部阴影在后面加上inset即可！
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 20px 20px 10px 10px blue inset;
}
默认值时
div
{
width: 200px;
height: 200px;
background: yellow;
margin-top: 200px;
margin-left: 400px;
box-shadow: 20px 20px 10px 10px blue;
}
当然阴影的形状是跟随盒子的变化而变化的，当为圆形盒子时
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 属性列表来加载。
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);
}
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章名称：探索盒子阴影box-shadow-创新互联
网址分享：http://shouzuofang.com/article/jjsds.html