CSS 有效使用CSS3 box-shadow属性

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 有效使用CSS3 box-shadow属性相关的知识，希望对你有一定的参考价值。

css:
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;

script:
ctl=false;
pntr=0;
function animLoop()
{
    styl='showbox clrs'+pntr;
    document.getElementById('anim').className=styl;
    pntr=(pntr>2) ? 0 : pntr+1;
    if(!ctl) TO = setTimeout('animLoop()', 600);
    ctl=false;
}

markup:
<div id="anim" class="showbox clrs0">content
<button id="b1" onclick="this.style.display='none';document.getElementById('b2').style.display='inline';animLoop();">Animate</button>
<button id="b2" onclick="this.style.display='none';document.getElementById('b1').style.display='inline';ctl=1;">Stop Lame Animation</button></div>

以上是关于CSS 有效使用CSS3 box-shadow属性的主要内容，如果未能解决你的问题，请参考以下文章

CSS系列-css3之box-shadow介绍

探索 CSS3 中的 box-shadow 属性

CSS3属性值之box-shadow

css3 box-shadow

css3阴影box-shadow

CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）