Box-Shadow没那么简单啦

[复制链接]
jimcn 发表于 2019-7-28 13:22:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
前言
 说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事。

二话不说看效果
3D小球
347002-20160510112810343-1051395899.png
<style type="text/css">.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>

回复

使用道具 举报

精彩评论1

 楼主| jimcn 发表于 2019-7-28 14:06:34 | 显示全部楼层
347002-20160510112824452-1940285583.png
<style type="text/css">
.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>

回复 支持 反对

使用道具 举报

服务电话

15219860001

QQ客服:86660368-正常工作时间服务
关注我们 :