Html/CSS front-end how to implement text border shadow, css front-end

Html/CSS front-end how to implement text border shadow, css front-end

Last time we talked about how to implement text shadow on the Html5 front end. In fact, the shadow effect has become more and more widely used in development, now let's talk about how to implement border shadow in the same way.

I. Border shadow
Box-shadow border shadow
Parameters:
Parameter 1 x-shadow: sets the horizontal offset of the shadow of an object. The unit can be px, em, or percent. A negative value is allowed.
Parameter 2 y-shadow: sets the vertical offset of the shadow of an object. The unit can be px, em, or percent, and negative values are allowed.
Parameter 3 blur: used to set the border shadow radius.
Parameter 4 spread: expands the radius and sets the shadow size. This parameter is optional and the default value is 0.
Parameter 5 color: Set the shadow color.
Parameter 6 inset: this parameter is not set by default. By default, it is an external shadow, and inset indicates an internal shadow.

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

Ii. Instance
Effect 1

Effect 2

How can we achieve this?
HTML Structure
CSS style
Font Style
Font color
Border shadow let's look at the specific code:
HTML:

<Div class = "box"> box-shadow </div> 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 ;}

　　

Shanghai shangxuexiang java Weixin java8733, learn more
When you visit the Web page next time, remember to pay attention to the effects of the border shadow, and manually implement it. After all, the practices are actually true ^. ^