zoukankan      html  css  js  c++  java
  • css3边框阴影属性

    在CSS3中,我们可以使用box-shadow属性轻松地为元素添加阴影效果。

    语法:

    box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

    说明:

    (1)x-shadow:设置水平阴影的位置(X轴),可以使用负值;

    (2)y-shadow:设置垂直阴影的位置(y轴),可以使用负值;

    (3)blur:设置阴影模糊半径;

    (4)spread:扩展半径,设置阴影的尺寸;

    (5)color:设置阴影的颜色;

    (6)inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

    举例:

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS3 box-shadow属性</title>
        <style type="text/css">
            div
            {
                width:100px;
                height:100px;
                line-height:100px;
                text-align:center;
                margin-bottom:20px;
            }
            #div1{box-shadow:0 0 12px red;}
            #div2{box-shadow:0 0 12px red inset;}
        </style>
    </head>
    <body>
        <div id="div1">外阴影</div>
        <div id="div2">内阴影</div>
    </body>
    </html>

    显示效果:

    这里注意一个技巧:当水平阴影位置x-shadow和垂直阴影位置y-shadow都为0时,阴影都向外发散或者都向内发散。

    剩下的去这看吧

  • 相关阅读:
    PHP获取汉字拼音首字母
    记录,待总结5
    HDU2833 WuKong Floyd
    搜索
    记录,待总结4
    HDU3350 #define is unsafe 栈的应用
    指针与引用的混合使用总结
    多源最短路径 Floyd
    引用总结
    函数返回值总结
  • 原文地址:https://www.cnblogs.com/yourself/p/9093718.html
Copyright © 2011-2022 走看看