Home > Developer > Web Develop

CSS3 Box-shadow

Source: Internet
Author: User
Tags transparent color
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

  2. <! DOCTYPE HTML>
  4. <html>
  8. <head>
  10. <Meta content="text/html; Charset=utf-8 " http-equiv="content-type ">
  12. <title>CSS3 properties: Box-shadow test </title>
  14. <script type="Text/javascript" src="Js/jquery.min.js"></Script >
  16. <script type="Text/javascript" src="Js/jquery.boxshadow.js"></Script >
  18. <style type="Text/css">
  20. . box-shadow-1{
  22. -webkit-box-shadow:3px 3px 3px;
  24. -moz-box-shadow:3px 3px 3px;
  26. box-shadow:3px 3px 3px;
  28. }
  30. . box-shadow-2{
  32. -webkit-box-shadow:0 0 10px #0CC;
  34. -moz-box-shadow:0 0 10px #0CC;
  36. box-shadow:0 0 10px #0CC;
  38. }
  40. . box-shadow-3{
  42. -webkit-box-shadow:0 0 10px rgba (0, 204, 204,. 5);
  44. -moz-box-shadow:0 0 10px rgba (0, 204, 204,. 5);
  46. box-shadow:0 0 10px rgba (0, 204, 204,. 5);
  48. }
  50. . box-shadow-4{
  52. -webkit-box-shadow:0 0 10px 15px #0CC;
  54. -moz-box-shadow:0 0 10px 15px #0CC;
  56. box-shadow:0 0 10px 15px #0CC;
  58. }
  60. . box-shadow-5{
  62. -webkit-box-shadow:inset 0 0 10px #0CC;
  64. -moz-box-shadow:inset 0 0 10px #0CC;
  66. Box-shadow:inset 0 0 10px #0CC;
  68. }
  70. . box-shadow-6{
  72. box-shadow:-10px 0 10px Red,/* Left Shadow */
  74. 10px 0 10px Yellow,/* Right Shadow */
  76. 0-10px 10px Blue,/* top Shadow */
  78. 0 10px 10px Green; /* Bottom Shadow */
  80. }
  82. . box-shadow-7{
  84. box-shadow:0 0 10px 5px Black,
  86. 0 0 10px 20px Red;
  88. }
  90. . box-shadow-8{
  92. box-shadow:0 0 10px 20px Red,
  94. 0 0 10px 5px black;
  96. }
  98. . box-shadow-9{
  100. box-shadow:0 0 0 1px red;
  102. }
  110. . obj{
  112. width:100px;
  114. height:100px;
  116. margin:50px Auto;
  118. Background: #eee;
  120. }
  122. . outer{
  124. width:100px;
  126. height:100px;
  128. border:1px solid red;
  130. }
  132. . inner{
  134. width:60px;
  136. height:60px;
  138. background-color:red;
  140. -webkit-box-shadow:50px 50px Blue;
  142. -moz-box-shadow:50px 50px Blue;
  144. box-shadow:50px 50px Blue;
  146. }
  148. </style>
  150. </head>
  154. <body>
  156. <div class="obj box-shadow-1"></div>
  158. <div class="outer">
  160. <div class="inner"></div>
  162. </div>
  164. <div class="obj box-shadow-2" ></div>
  166. <div class="obj box-shadow-3" ></div>
  168. <div class="obj box-shadow-4" ></div>
  170. <div class="obj box-shadow-5" ></div>
  172. <div class="obj box-shadow-6" ></div>
  174. <div class="obj box-shadow-7" ></div>
  176. <div class="obj box-shadow-8" ></div>
  178. <div class="obj box-shadow-9" ></div>
  180. <script type="Text/javascript">
  182. $ (document). Ready (function () {
  184. if ($.browser.msie) {
  186. $ ('. obj '). Boxshadow ( -10,-10,5, "#0cc"); The obj element uses the Box-shadow
  188. }
  190. });
  192. </Script>
  196. </body>
  198. </html>



Conclusion:

1) from the effect of. Box-shadow-1 can be obtained without specifying the shadow color of the property, the shadow in Safari and Chrome under the WebKit kernel behaves as a transparent color, which behaves black under Firefox/opera.

2) from the comparison of the internal and external two div blocks inner and outer, all the mainstream browsers that support Box-shadow are represented as follows: The inner shadow bursting into the outer container renders the entire shadow effect. The principle and performance of Box-shadow is explained by the standard of the way of illustration:

We can see how the fillet Border-radius, the shadow extension radius, the shadow blur radius, and how padding affect the object's shadow: Border-radius with a value other than 0 will affect the shape of the shadow with the same effect, However, the border-image does not affect any shape of the object's shadow; The shadow of the object is the same as the hierarchy of the box model, and the outer shadow is below the background of the object and the inner shadow below the border. We know that the default background picture is above the background color. So the entire hierarchy is: Border > Inner shadow > Background picture > Background Color > Outer shadow.

3) from. Box-shadow-2 to. Box-shadow-5 effect, we can understand the function of Box-shadow value.

. Box-shadow-2 is XY has no offset, shadow size 10px, no expansion radius, color #0cc namely Rgba (0, 204,204, 1), here we use color hex value; effect

and. Box-shadow-3 is in. Based on the box-shadow-2 effect, the RGBA color value is applied, with the benefit of adding alpha transparency to the Box-shadow shadow. Effect:

. Box-shadow-4 in. The shadow extension radius of 15px is added based on the box-shadow-2 effect.

. Box-shadow-5 in. Based on the box-shadow-2 effect, the outer shadow is set to an inner shadow.

4). Box-shadow-6 one element uses multiple shadows, and multiple shadows are separated by commas. To set the shadow effect on the four sides of the object, we do this by changing the positive negative values of x-offset and Y-offset, where x-offset is negative, the left shadow is generated, the right shadow is generated for positive values, and the Y-offset is a positive value that generates a bottom shadow and a negative value when the top shadow is generated. and set the blur radius to 0, if not set to 0 then the other three sides will also have a shadow. This needs attention!

Note that the notation is wrong: {box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px Green}

And there's a multiple-shadow order problem. When you use multiple shadow properties for the same element, you need to be aware of its order, and the first-written shadow will be displayed at the top level, such as. Box-shadow-7 is set to a different fuzzy value:

. box-shadow-7{

box-shadow:0 0 10px 5px Black,

0 0 10px 20px Red;

}

You will be able to see the sequential effect of the Cascade:

If you adjust the two shadow effects, change to the following:

. box-shadow-8{

box-shadow:0 0 10px 20px Red,

0 0 10px 5px black;

}

Only the red shadow effect is displayed, because the Red shadow layer is above, the blur radius is large, and the black shadow behind is completely obscured.

The conclusion is that if the previous shadow blur value is less than the shadow blur value that follows, the front shadow will cover the shadow effect behind if the blur value of the front shadow is greater than the shadow blur value that follows.

4) class border border effect (only set shadow expansion radius and shadow color)

The effect of the. Box-shadow-9 is similar to boder:1px solid red, but the Box-shadow effect differs from the border effect on the object height, which is an extended radius greater than the border height. And the shadow does not affect any layout of the page, which can be confirmed by looking at the layout diagram under Firebug.

5) Box-shadow Shadow effect in the simulated CSS3 under IE

Method One: You can use IE's shadow filter

basic Syntax : Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (numeric) );

Note : The filter must be used with the background property, otherwise the filter will fail.

Box-shadow (shadow) code in analog CSS3 under IE:

[CSS]View PlainCopy
  2. . box-shadow{
  4. Filter:progid:DXImageTransform.Microsoft.Shadow (color=' #969696 ', direction=135, strength=5); /*for ie6,7,8*/
  6. Background-color: #ccc;
  8. -moz-box-shadow:2px 2px 5px #969696; /*firefox*/
  10. -webkit-box-shadow:2px 2px 5px #969696; /*webkit*/
  12. Box-shadow:2px 2px 5px #969696; /*opera or ie9*/
  14. }
  • Method Two: Some JS and. HTC's hack file can implement the shadow effect in IE.
  • IE-CSS3.HTC is an HTC file that allows IE browser to support partial CSS3 properties, not just box-shadow, it also allows your IE browser to support fillet properties Border-radius and Text Shadow properties Text-shadow.

  • It is used by downloading it and putting it in your server directory

    Write the following code in your

    The disadvantage of this script is that IE only supports part of the Box-shadow value. Need to note:

      • When you use this HTC file, in your CSS, as long as you write any kind of Box-shadow,-moz-box-shadow or-webkit-box-shadow, IE will render.
      • When using this HTC file, you cannot write box-shadow:0 0 10px red; And should be box-shadow:0px 0px 10px red; Otherwise, IE will fail.
      • Alpha Transparency in RGBA values is not supported.
      • Inset inner shadow is not supported.
      • Shadow extensions are not supported.
      • Shadows are only shown in black in IE, no matter what color you set.

    method Three: Use jquery plug-in jquery.boxshadow.js, plug-in is Http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

    Using the method is simple, the file and the jquery repository into the head tag, insert the following JS effect code:

    [JavaScript]View PlainCopy
      1. <script type="Text/javascript" >
      2. $ (document). Ready (function () {
      3. if ($.browser.msie) {
      4. $ ('. obj '). Boxshadow ( -10,-10,5,"#0cc"); the//obj element uses the Box-shadow
      5. }
      6. });
      7. </script>


    Note: JS can be used: obj.style.webkitboxshadow= value (string); obj.style.mozboxshadow= value (string); obj.style.boxshadow= value (string);

    Supplemental Knowledge: Properties of CSS3

    Border-top-left-radius:[<length> | <percentage>] [<length> | <percentage>]?

    Default value: 0

    Value:

    <length>:

    Sets the upper-left corner (top-left) fillet radius length of the object with a length value. Negative values are not allowed

    <percentage>:

    Sets the upper-left corner (top-left) fillet radius length of the object in percent. Negative values are not allowed

    Description

    Sets or retrieves the upper-left corner rounded border of an object. Provides 2 parameters, 2 parameters are separated by a space, each parameter allows to set 1 parameter values, the 1th parameter represents the horizontal radius, and the 2nd parameter represents the vertical radius, as the 2nd parameter is omitted, the default equals the 1th parameter. If border-top-left-radius:5px10px is set, the horizontal fillet radius of the top-left angle is 5px and the vertical fillet radius is 10px. The corresponding script attribute is Bordertopleftradius.

CSS3 Box-shadow

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
cross shaped shadow box box shadow examples box shadow cross browser material box shadow empty shadow box arrow of light shadow box target shadow box picture frames

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More