综合编程

Simple CSS box-shadow

微信扫一扫,分享到朋友圈

Simple CSS box-shadow
0 0

I've made the below fiddle from complete scratch, you can use it if you like it


Demo

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

.one {
    background: #B4B300;
    height: 100px;
}

.two {
    background: #FD370A;
    height: 100px;
    box-shadow: 0 0 5px #212121;
}

.three {
    background: #fff;
    height: 5px;
}

Instead of using inset
shadow, am using a shadow which renders from all sides, right left are hidden as the div
spans entire row, the shadow at the bottom is hidden with another div
using background: #fff;

Note: I forgot to add -moz
and -webkit
prefixes so be sure you use
them if you want to support the older browsers too.

CSS3 Recipes
感谢您的支持!

    CA Technologies' Agile Transformation: A Firsthand Perspective

    上一篇

    分享一次前端面试题及其详细答案剖析

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片

    热门分类