边框阴影box-shadow

边框的阴影：

参数说明：

box-shadow:1px 2px 3px 4px #ccc inset；

1px  从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）

2px  从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）

3px  阴影的模糊度，只允许为正值

4px  阴影扩展半径

#ccc  阴影颜色

 inset  设置为内阴影（如果不写这个值，默认为外阴影）

说明

1. 对于上边，沿x轴方向的偏移量显然没有意义，设为0px；

2. 沿y轴正方向阴影进入div内部，不显示，因此写为负数；

3. 扩展半径不要写，或者写成0px，这样就不会影响其他的边；

4. 颜色自定；

5. 模糊程度按需要自定；

6. 下、左、右边阴影按规律类推。

css部分

 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/

                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/

                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/

                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

例子：

demo.css

#box{

    width:200px;

    height:200px;

    margin:30px auto;

    text-align: center;

    color:seagreen;

    font-size: 26px;

    line-height: 200px;

    background: yellowgreen;

    border:2px solid darkslategray;

    box-shadow: 0px -10px 0px 0px #ff0000,

    			-10px 0px 0px 0px #3bee17,

    			10px 0px 0px 0px #2279ee,

    			0px 10px 0px 0px #eede15;

}

html部分：

<div id="box">

    边框阴影

</div>

效果：

多张纸张层叠效果：

样式：

.footer:before {

    content: '';

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    height: 50px;

    overflow: hidden;

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),

                0 8px 0 -3px #f6f6f6,

                0 9px 1px -3px rgba(0, 0, 0, 0.2),

                0 16px 0 -6px #f6f6f6,

                0 17px 2px -6px rgba(0, 0, 0, 0.2);

}

完整代码：

<div class="footer">

<h1 style="margin:210px 110px;">多重纸张层叠样式</h1>

</div>

<style>

.footer{

	margin:100px 100px;

	width:500px;

	height:500px;

	border:2px solid #f6f6f6;

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),

                0 8px 0 -3px #f6f6f6,

                0 9px 1px -3px rgba(0, 0, 0, 0.2),

                0 16px 0 -6px #f6f6f6,

                0 17px 2px -6px rgba(0, 0, 0, 0.2);

}

</style>

ok，就到这里

巴特西

边框阴影box-shadow

最新文章

热门文章