Simple CSS box-shadow

综合编程 2018-12-07 阅读原文

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

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

Central header element with fixed position at the ... This question already has an answer here: Center a position:fixed element 12 answers I have...
animate a highlighted link (animer un lien surlign... For some time, I try to reproduce the effect highlighted titles of link creation. http://www.platige.com/en/ ...
Issue #287 Rebuilding Slack.com Mina Markham gives a peek behind-the-scenes of redesigning Slack’s website, powered...
$ (& Hellip;&... I am having trouble with the JQuery validation plugin specifically actually getting the function to be recognised. I am ...