Html/css front end for text border shadow effect instance sharing

In the development of the shadow effect is now more and more widely used, so today we will say the same way to achieve the border shadow. The following script of the small to everyone to bring the html/css front-end to achieve the text border shadow effect, the need for friends to refer to the next bar, hope to help everyone.

A. Border Shadow

Box-shadow Border Shadow

Parameter: Parameter 1 X-shadow: Sets the shadow horizontal offset value of the object, which can be px, EM, or percent, allowing negative values. Parameter 2 Y-shadow: Sets the shadow vertical offset value of the object, which can be px, EM, or percent, allowing negative values. Parameter 3 blur: used to set the border shadow radius size. Parameter 4 spread: Extend the radius, set the size of the shadow; This parameter is optional and the default value is 0. Parameter 5 color: Sets the colors of the shadow. Parameter 6 inset: This parameter is not set by default. By default it is an outer shadow, and inset represents an inner shadow.

Box-shadow:x-shadow y-shadow blur spread color inset;

Two. Example

Effect 1

Effect Two

How are we going to achieve this?

HTML structure CSS style font style font color Border Shadow Let's take a look at the specific code:

Html:

<p class= "box" >box-shadow</p>

Css:

.box{width:300px;    height:150px;    Background:deepskyblue;    font:30px/150px ' Microsoft Yahei ';    Color: #fff;    Font-weight:bold;    Text-align:center;    margin:100px Auto;    /* Border Shadow */* effect 1*/box-shadow:inset 5px 5px 20px #ccc; /* Effect 2*/box-shadow:inset 5px 5px 20px pink,5px 5px 20px #000;}