CSS3属性：box-shadow测试

最新推荐文章于 2024-05-22 09:21:14 发布

乐夫天命兮

最新推荐文章于 2024-05-22 09:21:14 发布

阅读量184

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/98759896

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

容器设置阴影 box-shadow 语法：
box-shadow: h-shadow v-shadow blur spread color inset;
以上各属性值的解析：
horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。

vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10px）将使它偏向上。

blur(模糊)：设置的柔化半径。默认值为0，这意味着没有模糊。正值增加了模糊，而负值，实际上缩小了阴影。此属性默认为0。

spread:阴影的尺寸，该参数为可选参数。0px代表阴影和当前的实体一样大，大于0则表示大于实体的尺寸。

color(颜色)：颜色值,也就是设置阴影颜色。

inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。

提醒：该属性可以加在任意元素上，如图片，Div，SPAN，P标签等等都可以。
在这里插入图片描述

<!DOCTYPE html>  
<html>  
<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
<title>CSS3属性：box-shadow测试</title>  
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.boxshadow.js"></script>  
<style type="text/css">  
.box-shadow-1{  
  -webkit-box-shadow: 3px 3px 3px;  
  -moz-box-shadow: 3px 3px 3px;  
  box-shadow: 3px 3px 3px;  
}  
.box-shadow-2{  
  -webkit-box-shadow:0 0 10px #0CC;  
  -moz-box-shadow:0 0 10px #0CC;  
  box-shadow:0 0 10px #0CC;  
}  
.box-shadow-3{  
  -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  box-shadow:0 0 10px rgba(0, 204, 204, .5);  
}  
.box-shadow-4{  
  -webkit-box-shadow:0 0 10px 15px #0CC;  
  -moz-box-shadow:0 0 10px 15px #0CC;  
  box-shadow:0 0 10px 15px #0CC;  
}  
.box-shadow-5{  
  -webkit-box-shadow:inset 0 0 10px #0CC;  
  -moz-box-shadow:inset 0 0 10px #0CC;  
  box-shadow:inset 0 0 10px #0CC;  
}  
.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  
}  
.box-shadow-7{  
    box-shadow:0 0 10px 5px black,  
    0 0 10px 20px red;  
}  
.box-shadow-8{  
    box-shadow:0 0 10px 20px red,  
    0 0 10px 5px black;  
}  
.box-shadow-9{  
    box-shadow: 0 0 0 1px red;  
}  
  
  
  
.obj{  
    width:100px;  
    height:100px;  
    margin:50px auto;  
    background:#eee;      
}  
.outer{  
    width: 100px;  
    height: 100px;  
    border: 1px solid red;  
}  
.inner{  
    width: 60px;  
    height: 60px;  
    background-color: red;  
    -webkit-box-shadow: 50px 50px blue;  
    -moz-box-shadow: 50px 50px blue;  
    box-shadow: 50px 50px blue;  
  }  
</style>  
</head>  
  
<body>  
    <div class="obj box-shadow-1">box-shadow-1</div>  
    <div class="outer">  
        <div class="inner"></div>  
    </div>  
    <div class="obj  box-shadow-2" >box-shadow-2</div>  
    <div class="obj  box-shadow-3" >box-shadow-3</div>  
    <div class="obj  box-shadow-4" >box-shadow-4</div>  
    <div class="obj  box-shadow-5" >box-shadow-5</div>  
    <div class="obj  box-shadow-6" >box-shadow-6</div>  
    <div class="obj  box-shadow-7" >box-shadow-7</div>  
    <div class="obj  box-shadow-8" >box-shadow-8</div>  
    <div class="obj  box-shadow-9" >box-shadow-9</div>  
    <script type="text/javascript">  
        $(document).ready(function(){  
        if($.browser.msie) {  
          $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
        }  
      });  
    </script>  
  
</body>  
</html>

乐夫天命兮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3属性：box-shadow测试

容器设置阴影 box-shadow 语法：box-shadow: h-shadow v-shadow blur spread color inset;以上各属性值的解析：horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10p...
复制链接

扫一扫