来看看css3中的box

作者：手机用户2502939545 | 来源：互联网 | 2023-05-19 04:15

不谈IE，只谈谈box-shadow的具体使用方法语法：E{box-shadow:<length><length><length>?<length&g

不谈IE，只谈谈box-shadow的具体使用方法

语法：

E {box-shadow:   ??||}

也就是：

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

换句说：

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。

取值：

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

浏览器的兼容：

alt="box shadow img" />

 img {
   box-shadow: inset 0 0 10px red;
 }

alt="box shadow img" />div>

我们来看其主要的样式：

.img-wrap {
    -webkit-box-shadow: inset 0 0 10px red;
    -moz-box-shadow: inset 0 0 10px red;
    box-shadow: inset 0 0 10px red;
    display: inline-block;
}
.img-wrap img {
    position: relative;
    z-index: -1;
}

box shadow img

.shadow {
    position: relative;
    display: inline-block;
    *display: inline;
}
.shadow::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 5px 1px red;
    -webkit-box-shadow: inset 0 0 5px 1px red;
    box-shadow: inset 0 0 5px 1px red;
}

alt="" class="inset-shadow" />

Css Code:

.inset-shadow{
   -moz-box-shadow: 0 0 5px red inset;
   -webkit-box-shadow: 0 0 5px red inset;
   box-shadow: 0 0 5px red inset;
}

jQuery Code:

$(document).ready(function(){
    $('img.inset-shadow').each(function() {
        var $img = $(this);
        $img.load(function() {
            var $div = $('');
            $div.width($img.width());
            $div.height($img.height());
            $div.css('background-image', 'url(' + $img.attr('src') + ')');
            var display = $img.css('display');
            //If the div is set to inline the width and height will be 0 :(
            //inline-block appears to be the only way around it but it's not
            //supported in all browsers :( The browsers it's not supported in
            //are probably the same ones that don't support box-shadow,
            //so a solution maybe to add a browser check.
            if (display === 'inline') {
                $div.css('display', 'inline-block');
            } else {
                $div.css('display', display);
            }
            $div.attr('class', $img.attr('class'));
            $img.replaceWith($div);
        });
    });
});

大家可以通过自己的firebug查看其中img的变化。

有关img上使用内阴影的使用方法，你可以参阅CSS Box-Shadow:Inset一文。

给body顶部增加一个阴影

body: before {
    content: "";
    position: fixed;
    top: -10 px;
    left: 0;
    width: 100 % ;
    height: 10 px;
    z - index: 999;
    box - shadow: 0 0 10 px rgba(125, 255, 125, 0.8);
}

这里提醒大家，为了不影响布局，top的取值最好和height的取值一致。只是top使用负值。利用同样的方法我们可以给任何一个元素加上阴影，但相应需要改变定位方式兴。

Drop-shadow效果

Drop-shadow效果，大家在Photoshop中肯定都见识过了，今天我们是来看一个实例，不增加任何元素标签的情况下，我们主要是利用box-shadow配合元素的两个伪元素:before和:after以及定位来实现，这种效果支持的浏览器现在主要有firefox3.5+/chrome5+/safari5+/opera10.6+/Ie9+。

我们先来了解一下其原理：我们通过box-shadow实现drop shadow效果是仅用一个div标签元素，然后配合其两个伪元素":before"和":after"；然后我们分别给其伪元素定位到div的后面，并把box-shadow应用到这两个伪元素上。具体我们来看其实现步骤：

先来看其html代码：

 <div class="drop-shadow">drop shadow effectdiv>

我定义了一个叫"drop-shadow"的div，现在我们给其应用一个基本样式

.drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc;        
 }

接着我们给drop-shadow的“:before”和":after"定位到drop-shadow下面：

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
 }

给drop-shadow的":before"和":after"加上阴影效果

 .drop-shadow:before,
 .drop-shadow:after {
     content: "";
     position: absolute;
     z-index: -1;
     bottom: 15px;
     left: 10px;
     width: 50%;
     height: 20%;
     /*add box-shadow*/
     -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     box-shadow: 0 15px 10px rgba(125,125,125,0.8);
  }

现在我们只得到了一边的阴影效果，那我么们可以通过应用css3 transforms来实现另一边的效果（有关CSS3的transform属性使用，我们将在下文介绍）

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
 }

我们现在只需要改变":after"伪元素定位方向。（伪元素":after"在相反方向旋转，相对于":before"）

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
  }

Drop shadow最终核心代码如下所示，只是我们在“:before”和“:after”中加了一个"max-width":的限制，

.drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc; 
    margin-left: 100px;       
  }

  .drop-shadow:before,
  .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    max-width: 150px;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
 }

div {
          filter: 
              progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
              progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
              progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
              progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
      }

使用滤镜来实现IE下的效果，基中“color”为阴影色，“direction”是阴影方向，“strength”是阴影强度。特别注意，颜色“#eeeeee”在此处不能写成“#eee”，不然会无效果。