CSS3 implements special shadow (learning notes) and css3 learning notes
Learning Source: MOOC http://www.imooc.com/view/240
Please refer to the following link for more information:
HTML Structure
1 <body> 2 <div class = "wrap effect"> 3 <! -- Effect class: Shadow class, other elements can also use --> 4CSS style (the prefix of Each browser is omitted)
1/* Common class */2 body {font-family: Arial; font-size: 20px;} 3 body, ul {margin: 0; padding: 0; list-style: none;} 4. wrap {width: 70%; height: 200px; margin: 50px auto; background: # fff;} 5. wrap h1 {font-size: 20px; text-align: center; line-height: 200px;} 6 7/* radian shadow */8. effect {9 position: relative; 10 box-shadow: 0px 1px 4px rgba (0.3, 0, 0.1), 11 0 0 10px rgba (, 0,) inset; 12/* Add a small shadow with a range of = 4px; then add an inner shadow with a range of = 10px; */13} 14. effect: before ,. effect: after {15 content: ''; 16 background: # f00; 17 position: absolute; 18 z-index:-2; 19 top: 50%; bottom: 0; left: 30px; right: 30px; 20/* set four direction values, and then the browser automatically calculates the box size; */21 box-shadow: 0px 0px 20px rgba (, 0, 0, 0.8); 22/* set the shadow of the added box; */23 border-radius: 100px/10px; 24/* Add the rounded corner: the rounded corner in the horizontal direction is 100px, the rounded corner in the vertical direction is 10px, and */25} 26 27/* corner shadow */28. box {29 width: 980px; 30 height: auto; 31 clear: both; 32 overflow: hidden; 33 margin: 20px auto; 34} 35. box li {36 position: relative; 37/* uses li as the positioning benchmark; */38 width: 300px; 39 height: 210px; 40 float: left; 41 background: # fff; 42 margin: 20px 10px; 43 border: 2px solid # efefef; 44 box-shadow: 0px 1px 4px rgba (0, 0, 0.27 ); 45/* Add a small shadow to li; */46} 47. box li img {48 display: block; 49 width: 290px; 50 height: 200px; 51 margin: 5px; 52} 53. box li: before {54 content: ''; 55 position: absolute; 56 z-index:-3; 57 width: 90%; 58 height: 80%; 59 left: 18px; 60 bottom: 8px; 61 box-shadow: 0px 8px 20px rgba (0.6, 0,); 62 transform: skew (-12deg) rotate (-4deg ); 63/* the image is tilted 12 degrees to the right, and rotated 4 degrees counter-clockwise. */64} 65. box li: after {66 content: ''; 67 position: absolute; 68 z-index:-4; 69 width: 90%; 70 height: 80%; 71 right: 18px; 72 bottom: 8px; 73 box-shadow: 0px 8px 20px rgba (0,0, 0, 0.6); 74 transform: skew (12deg) rotate (4deg ); 75/* the image is tilted at 12 degrees to the left, and rotated at 4 degrees clockwise. */76}Previously, gray layers were used in PS to overlay other layers for special shadow effects. The same idea was applied to CSS. Like!
Knowledge Point supplement
1. box-shadow -- add one or more shadows. 2> 1. function: box-shadow -- add one or more shadows; 3> 2. syntax: box-shadow: h-shadow v-shadow blur spread color inset; 4> 3. parameter: 5 >>:h-shadow (required): horizontal shadow position; negative value allowed; 6 >>:v-shadow (required): vertical shadow position; negative value allowed; 7 >>:blur (optional): blur distance; 8 >>:spread (optional): shadow size; 9 >>:color (optional): shadow color; 10 >>: inset (optional): Change the external shadow (outset) to the internal shadow; 11> 4. browser: IE9 +/FF412 13 2.: before AND: after 14> 1.: before selector: insert content before the content of the selected element. 15> 2.: after selector: insert content after the content of the selected element; 16> 3 Note: You need to use the content attribute to specify the content to be inserted. 17> 4. Browser: IE8 or earlier: after, must be used <! DOCTYPE>; 18 19 3. transform -- 20> 1. function: Apply 2D or 3D conversions to elements 21> 1. syntax: transform: none | transform-functions22> 2. parameter: 23 >>: skew (x-angle, y-angle): defines 2D skew conversion along the X and y axes; 24 >>: skewX (angle ): defines 2D skew conversion along the X axis; 25 >>: skewY (angle): defines 2D skew conversion along the Y axis;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
