How to add shadows to fonts and elements in css? text-shadow and box-shadow implementation

This article will introduce to you how to add shadows to fonts and elements in CSS? text-shadow and box-shadow implementation. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Syntax:

Object selector {text-shadow:X-axis offset Y-axis offset shadow blur radius shadow color}

Note: text-shadow can use one or more projections. If multiple projections are used, they must be separated by commas ",".
2. Value:

The box-shadow attribute can have up to 6 parameter settings, and their respective values ​​are:

　(1) Shadow horizontal offset Amount: refers to the horizontal offset of the shadow. Its value can be positive or negative. If the value is positive, the shadow is on the right side of the object. Otherwise, when the value is negative, the shadow is on the left side of the object;

　(2) The vertical offset of the shadow: refers to 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. Otherwise, its value is negative. When, the shadow is at the top of the object;

　(3) Shadow blur radius: This parameter is optional, but its value can only be positive. If the value is larger, the shadow will be blurry, otherwise the shadow will be clearer. If its value is 0, it means that the shadow does not have a blur effect;

　(4) Shadow color: This parameter is optional. If no color is set, the browser will use the default color, but each browser The default colors 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;

Before CSS3 came out, the method of handling text shadows was basically There are pictures all over. Until the emergence of CSS3, our method of creating text shadows has been further improved. In fact, text shadow - text-shadow appeared in CSS2, but it was not ruthlessly abandoned in CSS2.0. Now it is used again in CSS3. This shows that text shadow - text-shadow is still worthy of our attention. Therefore, as a qualified front-end personnel, mastering text shadow must be a top priority.

CSS3 Set the text shadow effect. Set the shadow effect on the text font. The text-shadow style originally had this attribute in the CSS2 version, but in CSS3 the text shadow text-shadow is applied again to enrich the text layout and beautify it. Effect.

3. CSS3 words and grammar

CSS3 words: text-shadow

Grammar structure:

text-shadow: 5px 2px 6px black;

5px represents: The shadow is displayed 5px from the left of the text

2px means: the shadow is displayed 2px from the text

6px means: the shadow size range

black means: the shadow color is black

For example:

<p class="orange" id="all"> 
    <h1>smile微笑</h1> 
</p>

　　　　 body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			.orange {				
				background-color: #f8f8f8;
				padding: 30px;				
			}
			
			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}        　　

The effect is as shown:

##Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit

CSS Video Tutorial, CSS3 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##CSS3 Online Manual

div/css graphic tutorial

The above is the detailed content of How to add shadows to fonts and elements in css? text-shadow and box-shadow implementation. For more information, please follow other related articles on the PHP Chinese website!