Text shadow

Implement text-shadow

A. Text shadow

text-shadow text shadow

  • Parameter 1: The first value is used to set the length of the shadow of the object horizontal offset value. It can be negative
  • Parameter 2: The second value is used to set the length of the shadow of the object vertical offset values. It can be negative
  • Parameter 3: If a value of the third length of the shadow object is used to blur value. Do not allow negative
  • Parameter 4: Set the object color shadow

text-shadow: 10px 10px 50px #000;

effect

HTML structure

CSS Styles

Font style

font color

Text shadow then we look at the specific property code:

HTML:

<Div class = "text"> text shadow <div>
CSS:
.text {
font: Bold 100px / for 1.5 'Microsoft yahei';
Color: DodgerBlue;
/ text shadow /
text-Shadow: 10px 10px 50px # 000;
/ text -shadow: 10px 10px 50px # 000, # F00 -10px -10px 50px; /
}

Second, shadow box

box-shadow box shadow

Properties:
X-Shadow-essential. Horizontal position of the shadow. Allowing negative
Y-shadow necessary. The vertical position of the shadow. Allow negative
blur optional. Fuzzy distance
spread is optional. The size of the shadow. Allow negative
color optional. Color of the shadow.
inset optional. From the shadow of the outer layer (at the start) to change the inner shadow shadows.
By default: shadows outside display (outset).

Released two original articles · won praise 0 · Views 12

Guess you like

Origin blog.csdn.net/weixin_46392578/article/details/105122617