Box-Shadow没那么简单

转载

wx5fdc2703c6e35 2021-01-12 16:05:38

文章标签 Box-Shadow 文章分类 数据库

前言

说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。

二话不说看效果

3D小球 CSS魔法堂：Box-Shadow没那么简单啦:)

.ball{

background: rgba(100,100,100,0.2);

width: 100px;

height: 100px;

padding: 10px;

border-radius: 50%;

box-shadow: -14px 8px 100px #333 inset,

          0 0 2px #888,

      3px -1px 4px #444;

}

</style>

<div class="ball"></div> 纸张阴影(来自@张鑫旭老师)

CSS魔法堂：Box-Shadow没那么简单啦:)

.curved_box {

display: inline-block;

*display: inline;

width: 200px;

height: 248px;

margin: 20px;

background-color: #fff;

border: 1px solid #eee;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

position: relative;

*zoom: 1;

}

.curved_box:before {

-webkit-transform: skew(-15deg) rotate(-6deg);

-moz-transform: skew(-15deg) rotate(-6deg);

transform: skew(-15deg) rotate(-6deg);

left: 15px;

}

.curved_box:after {

-webkit-transform: skew(15deg) rotate(6deg);

-moz-transform: skew(15deg) rotate(6deg);

transform: skew(15deg) rotate(6deg);

right: 15px;

}

.curved_box:before, .curved_box:after {

width: 70%;

height: 55%;

content: ' ';

-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

position: absolute;

bottom: 10px;

z-index: -1;

}

</style>

<div class="curved_box"></div> 细读属性

看到上面这么绚丽的效果，是不是迫不及待想弄清box-shadow呢？下面我们来一步步解密它吧！

概述属性语法

box-shadow: none | <shadow>[,<shadow>]*

默认值为none

<shadow>:inset? && <length>{2,4} && <color>?

shadow pattern，默认为outset，即采用outer box-shadow。通过设置为inset时，则采用inner box-shadow。

horizontal offset，阴影距离原位置的水平位移，正数表示向右移动，负数表示向左移动。

vertical offset，阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。

blur radius，默认值为0，阴影模糊度半径。