简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed explanation of the use of CSS3 shadow box-shadow function

Detailed explanation of the use of CSS3 shadow box-shadow function

php中世界最好的语言
php中世界最好的语言Original
2018-03-22 16:48:222575browse

This time I will bring you a detailed explanation of the use of the CSS3shadow box-shadow function, what are the precautions when using CSS3 shadow box-shadow, the following is a practical case, let's go together take a look.

text-shadow is to add a shadow effect to the text, and box-shadow is to add a surrounding shadow effect to the element block. With the popularity of HTML5 and CSS3, the use of this special effect is becoming more and more common.

The basic syntax is {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

Object selector {box-shadow:[projection method] X axis Offset Y-axis offset Shadow blur radius Shadow expansion radius Shadow color}

Parameter setting value of box-shadow attribute:

Shadow type: this parameter Optional. If no value is set, the default projection method is outer shadow; if the unique value "inset" is taken, the projection is inner shadow;

X-offset: shadow horizontal offset, its value can be positive or negative . If the value is positive, the shadow is on the right side of the object. If the value is negative, the shadow is on the left side of the object;

Y-offset: the vertical offset of the shadow, its value can also be positive or negative. . If it is a positive value, the shadow is at the bottom of the object. When its value is negative, the shadow is at the top of the object;

Shadow blur radius: This parameter is optional, but its value can only be positive. If its value is 0, it means that the shadow has no blurring effect. The larger the value, the blurr the edge of the shadow;

Shadow expansion radius: This parameter is optional, and its value can be positive or negative. If the value If it is positive, the entire shadow will be extended and expanded, otherwise if the value is negative, it will be reduced;

Shadow color: This parameter is optional. If the color is not set, the browser will use the default color, but the default color of each browser is inconsistent, especially the transparent color under the Safari and Chrome browsers under the webkit kernel, and the black color under Firefox/Opera (has been verification), it is recommended not to omit this parameter.

Browser compatibility:

In order to be compatible with various mainstream browsers and support lower versions of these mainstream browsers, in Chrome and Safari based on Webkit When using the box-shadow attribute on the browser, we need to write the name of the attribute in the form -webkit-box-shadow. Firefox browser needs to be written in the form of -moz-box-shadow. 

box-shadow{  
         //Firefox0-  
         -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  
         //Safariand Google chrome0-  
         -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  
         //Firefox0+、 Google chrome 0+ 、 Oprea5+ and IE9    
         box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;    
}

Note: For convenience, in some parts of the following CSS attributes, only the box-shadow attribute is written, and the -moz- and -webkit- prefixes are not written. Don’t forget to add them when using them.

In order to understand the characteristics of box-shadow more clearly, do a few small tests to see the effect:

Related code: 

<!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/jqueryminjs"></script>  
<script type="text/javascript" src="js/jqueryboxshadowjs"></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>  
    <p class="obj box-shadow-1"></p>  
    <p class="outer">  
        <p class="inner"></p>  
    </p>  
    <p class="obj  box-shadow-2" ></p>  
    <p class="obj  box-shadow-3" ></p>  
    <p class="obj  box-shadow-4" ></p>  
    <p class="obj  box-shadow-5" ></p>  
    <p class="obj  box-shadow-6" ></p>  
    <p class="obj  box-shadow-7" ></p>  
    <p class="obj  box-shadow-8" ></p>  
    <p class="obj  box-shadow-9" ></p>  
    <script type="text/javascript">  
        $(document)ready(function(){  
        if($browsermsie) {  
          $('obj')boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
        }  
      });  
    </script>  
  
</body>  
</html>

Conclusion:

1) From the effect of .box-shadow-1, it can be concluded that when the attribute shadow color is not specified, the shadow appears as a transparent color under the Safari and Chrome browsers under the webkit kernel, and appears as black under Firefox/Opera.

2) From the comparison of the inner and outer p blocks, all mainstream browsers that support box-shadow behave as follows: the inner shadow breaks through the outer The layer container brings out the entire shadow effect. The W3C standard explains the principle and performance of box-shadow with diagrams:

From the picture we can understand: rounded border-radius, shadow expansion How radius, shadow blur radius and padding affect the object shadow: a non-zero value of border-radius will affect the shape of the shadow in the same way, but border-image will not affect any shape of the object shadow; the object shadow is the same as the box model The levels are the same, the outer shadow will be below the background of the object, and the inner shadow will be below the border and above the background. We know that by default the background image is on top of the background color. So the entire hierarchy is: border>inner shadow>background image>background color>outer shadow.

3) From the effect of .box-shadow-2 to .box-shadow-5, we can understand the role of box-shadow value.

. box-shadow-2 has no offset in xy, shadow size is 10px, no expansion radius, color #0CC is rgba(0, 204,204, 1), here we use the color HEX value ;Effect

而. box-shadow-3是在. box-shadow-2效果的基础上，应用了rgba颜色值，好处是给box-shadow阴影添加了alpha透明效果。效果：

. box-shadow-4在. box-shadow-2效果的基础上添加了阴影扩展半径15px。

. box-shadow-5在. box-shadow-2效果的基础上，将外阴影设为内阴影。

4）. box-shadow-6一个元素使用了多个阴影，多个阴影之间用逗号分隔。给对象四边设置阴影效果，我们是通过改变x-offset和y-offset的正负值来实现，其中x-offset为负值时，生成左边阴影，为正值时生成右边阴影，y-offset为正值是生成底部阴影，为负值时生成顶部阴影。并且把模糊半径设置为0，如果不设置为0的话那么其他三边也将会有阴影。这点需要注意！

注意这样的写法是错误的：{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green} 

并且此处还涉及到一个多阴影的顺序问题。当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层，如. box-shadow-7设为不同的模糊值：

.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;
}

将只显示红色的阴影效果，因为红色阴影层在上面，模糊半径大，将后面的黑色阴影完全遮挡。

得出的结论是：如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。

4）  类border边框效果（只设置阴影扩展半径和阴影颜色）

.box-shadow-9呈现的效果，同boder:1px solid red相似，但box-shadow的效果与border效果在对象高度上有区别，正好要比border高度大一个扩展半径。而且阴影不影响页面的任何布局，这一点可以通过查看firebug下的layout图得以证实。

5）  在ie下模拟css3中的box-shadow阴影效果

方法一：可以使用IE的Shadow滤镜

基本语法：filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

box-shadow{  
    filter: progid:DXImageTransformMicrosoftShadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/  
    background-color: #ccc;  
    -moz-box-shadow:2px 2px 5px #969696;/*firefox*/  
    -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/  
    box-shadow:2px 2px 5px #969696;/*opera或ie9*/  
}

在六一儿童节的专题中，我是这么处理的：

liblk-item{  
         width:423px;  
         height:229px;  
         float:left;  
         padding:8px;  
         margin:2px 18px 13px 21px;  
         display:inline;  
         border:1px solid #d3c998;  
         border-radius:2px;  
         filter:progid:DXImageTransformMicrosoftShadow(color='#d3c998', Direction=135,Strength=5);/*for ie6,7,8*/  
         background-color: #fff;  
         -moz-box-shadow:2px 2px 5px#d3c998;/*firefox*/  
         -webkit-box-shadow:2px 2px 5px#d3c998;/*webkit*/  
         box-shadow:2px 2px 5px #d3c998;/*opera或ie9*/  
  
}

方法二：有些js和.htc的hack文件可以实现IE中的阴影效果。

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是：下载它并放到你的服务器目录

在你的里面写入下面的代码:

这个脚本的缺点是IE只支持一部分的box-shadow值。需要注意：

  • 当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。

  • 当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。

  • 不支持RGBA值中的alpha透明度。

  • 不支持inset内阴影。

  • 不支持阴影扩展。

  • 阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。

方法三：使用jQuery的插件jquery.boxshadow.js，插件的下载地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

使用方法很简单，将该文件和jquery版本库引入head标签，插入以下js效果代码：

<script type="text/javascript">  
          $(document)ready(function(){  
   if($browsermsie) {  
     $('obj')boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
   }  
 });  
</script>

注意：js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;

补充知识：CSS3的属性

border-top-left-radius：[ | ] [ | ]?

默认值：0

取值：

：

用长度值设置对象的左上角(top-left)圆角半径长度。不允许负值

：

 用百分比设置对象的左上角(top-left)圆角半径长度。不允许负值

说明：

设置或检索对象的左上角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。 如设置border-top-left-radius:5px10px;表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。对应的脚本特性为borderTopLeftRadius。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

三种绝对定位元素的水平垂直居中的办法

width:100%;与width:auto的使用区别

水平垂直居中的方法

The above is the detailed content of Detailed explanation of the use of CSS3 shadow box-shadow function. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Realization of 3D photo album effectNext article：Realization of 3D photo album effect

Related articles

See more