February 26, 2016 Personal blog articles - move to segmentfault
(1) text-shadow (shadow text)
In the introduction css3: before the text-shadow text shadows, we take a look at what effect can be achieved with it:
Yes effect is very powerful text-shadow, then we started to learn it together.
语法：text-shadow：none | length{2,3} color
Default: none
Value:
none: no shadow
A first length value: offset level shading. It can be negative
The second length value: shaded vertical offset. It can be negative
3rd length value: Alternatively, the value of the shadow fuzzy. Do not allow negative
color: Set the shadow color
Description: can be set to effect a plurality of sets, each set of parameter values separated by commas
text-shadow: horizontal vertical offset value offset shadow blur color (RGBA),
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）
Note: (1) Use spaces to separate different attribute values (2) separated by commas different shading properties
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
</body>
</html>Show the effect on the browser as shown:
(2) box-shadow (shaded box)
Because the box-shadow and use almost the same text-shadow box-shadow compared with only text shadow, a shadow box one more attribute values - epitaxial shadow value (IV value)
Syntax : box-shadow: none | length {2,4} color default: none
Value:
none: no shadow
A first length value: offset level shading. It can be negative
The second length value: shaded vertical offset. It can be negative
3rd length value: Alternatively, the value of the shadow fuzzy. Do not allow negative
4th length value: Alternatively, shadows epitaxial value. Do not allow negative
color: set the color of the shadow.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
div{ float:left; margin:100px; width:400px; height:300px; font-size: 20px; line-height: 300px; text-align: center; }
.d1{box-shadow:0px 0px 50px 50px rgba(153,153,238,1);}
.d2{box-shadow:50px 0px 50px 50px rgba(153,153,238,1);}
.d3{box-shadow:-50px 0px 50px 0px rgba(153,153,238,1);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</body>
</html>