How to add shadow effect with css? (code example)-CSS Tutorial-php.cn

How to add shadow effect with css? (code example)

青灯夜游

Release： 2019-11-27 10:15:37

Original

6090 people have browsed it

How to add shadow effect in css? Can be added using the text-shadow attribute and box-shadow attribute. The following article will introduce to you how the text-shadow attribute and box-shadow attribute add shadow effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to add shadow effect with css? (code example)

Recommended manual:CSS3 latest version reference manual

1: Add Text shadow effect (text-shadow attribute)

1. What is text-shadow?
text-shadow can support adding shadow to text, so that we can use css3 attributes to increase the texture of text during design without using any images. Currently supported browsers include Firefox 3.1, Safari 3, Opera 9.5 and other modern browsers (data There may be deviations). Of course, the IE family cannot support it.

2. The syntax of text-shadow:

text-shadow:color length length length;

Copy after login

color: color;
length: respectively In order, it refers to "X-axis direction length, Y-axis direction length, shadow blur radius", which represents a length value composed of a floating point number and a unit identifier, which can be a negative value (or 0 value), specifying the horizontal extension distance of the shadow.

Positive values on the X-axis mean to the right, negative values mean to the left. In the same way, negative values on the Y-axis mean upward. Any of the values can be zero or empty (will be processed by default)

For example:

text-shadow:0.1em 0.1em 0.3em #333333;

Copy after login

The first value of the text-shadow attribute represents horizontal displacement, the second value represents vertical displacement, positive value means right or downward, negative value means horizontal displacement. The value is left or upper. The third value represents the blur radius (this value is optional). The fourth value represents the color of the shadow (this value is optional). This color value can be placed before the length value of the shadow effect. or after. If no color is specified, the value of the color attribute will be used instead.

The text-shadow attribute accepts a comma-separated list of shadow effects to apply to the text of the element. Shadow effects are applied in the order given, so it is possible to cover each other, but not the text itself. Shadow effects do not change the dimensions of the border, but may extend beyond its bounds.

3. Code example

The main use is the shadow list of text-shadow, plus the use of reasonable color matching, we can achieve the desired effect.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字阴影效果</title>
		<style type="text/css">
		.demo{
			width: 600px;
			overflow: hidden;
			margin: 10px auto;
		}
		p {
			width: 300px;
			font-size: 3em;
			margin: 10px;
			padding: 20px;
			text-align: center;
		}
		
		.p1 {
			text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
			color: red;
		}
		
		.p2 {
			background: black;
			text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
			color: red;
		}
		
		.p3 {
			text-shadow: -1px -1px white, 1px 1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p4 {
			text-shadow: 1px 1px white, -1px -1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p5 {
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			color: #ffffff;
			background: #CCC;
		}
		
		.p6 {
			text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
			color: #d1d1d1;
			background: #CCC;
		}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="p1">多色阴影效果</p>
			<p class="p2">火焰效果</p>
			<p class="p3">立体凸起效果</p>
			<p class="p4">立体凹下效果</p>
			<p class="p5">描边效果</p>
			<p class="p6">外发光效果</p>
		</div>

	</body>

</html>

Copy after login

Rendering:

How to add shadow effect with css? (code example)

##Recommended related articles: 1.
How to achieve a single-sided shadow effect in css2.
How to achieve a box shadow in css3? Shadow effect in css3Related video tutorials:
1.
CSS Video Tutorial-Jade Girl Heart Sutra Edition

2. Add box (border) shadow effect (box-shadow attribute)

1. The syntax of box-shadow

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

E {box-shadow: projection method X-axis offset Y-axis offset shadow blur radius shadow spread radius shadow color };

Value:

1. Shadow type: This parameter is optional. The default projection method is outer shadow; if the only value "inset" is taken, the outer shadow will be turned into an inner shadow;
2. Offset: refers to the vertical offset of the shadow. Its value can also be positive or negative. For positive values, the shadow is at the bottom of the object. For negative values, the shadow is at the top of the object;
4. Shadow blur radius: this parameter It is optional and can only be a positive value. If its value is 0, it means that the shadow does not have a blur effect. The larger the value, the blurr the edge of the shadow;
5. Shadow expansion radius: This parameter is optional, and its value It can be a positive or negative value. If it is a positive value, the entire shadow will be expanded, otherwise it will be reduced;
6. Shadow color: This parameter is optional. When no color is set, the browser will use the default color, but each The default colors of browsers are different, especially Safari and Chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter.

2. Consider compatibility

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

Copy after login

3. Code example

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>box-shadow的用法</title>
		<style type="text/css">
			.demo {
				width: 800px;
				overflow: hidden;
				margin: 50px auto;
			}
			
			.demo * {
				width: 150px;
				height: 150px;
				margin: 40px 20px;
				background-color: grey;
				display: inline-block;
			}
			/*右下阴影*/
			
			.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 15px #0CC;
				-moz-box-shadow: 0 0 10px 15px #0CC;
				box-shadow: 0 0 10px 15px #0CC;
			}
			/*四边同色内阴影*/
			
			.box-shadow-4 {
				-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-5 {
				box-shadow: -10px 0 10px red, /*左边阴影*/
				10px 0 10px yellow, /*右边阴影*/
				-10px 10px blue, /*顶部阴影*/
				10px 10px green;
				/*底边阴影*/
			}
			/*叠加异色阴影*/
			
			.box-shadow-6 {
				box-shadow: 0 0 10px 5px black, 0 10px 20px red;
			}
			/*兼容ie*/
			
			.box-shadow {
				filter: progid:DXImageTransform.Microsoft.Shadow(color=&#39;#969696&#39;, 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*/
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="box-shadow-1">右下阴影</div>
			<div class="box-shadow-2">四边同色阴影</div>
			<div class="box-shadow-3">四边同色阴影扩展</div>
			<div class="box-shadow-4">四边同色内阴影</div>
			<div class="box-shadow-5">四边异色外阴影</div>
			<div class="box-shadow-6">叠加异色阴影</div>
			<div class="box-shadow">兼容ie</div>
		</div>
	</body>

</html>

Copy after login

Rendering:

The above is the detailed content of How to add shadow effect with css? (code example). For more information, please follow other related articles on the PHP Chinese website!