Html/CSS front-end implementation of text border shadow effect example sharing

The use of shadow effects has become more and more widespread in development, so today we will talk about using the same technique to achieve border shadows. Below, the editor of Script House brings you the Html/CSS front-end to realize the text border shadow effect. Friends who need it can refer to it. I hope it can help everyone.

1. Border shadow

box-shadow Border shadow

Parameters: Parameter 1 x-shadow: Set the object’s shadow horizontal offset value, the unit can be px, em Or percentage, etc., negative values ​​are allowed. Parameter 2 y-shadow: Set the vertical offset value of the object's shadow. The unit can be px, em or percentage, etc. Negative values ​​are allowed. Parameter 3 blur: used to set the border shadow radius size. Parameter 4 spread: Expand radius, set the size of the shadow; this parameter is optional, and the default value is 0. Parameter 5 color: Set the color of the shadow. Parameter 6 inset: This parameter is not set by default. The default is outer shadow, inset means inner shadow.

box-shadow：x-shadow y-shadow blur spread color inset;

2. Example

Effect 1

##Effect 2

How do we achieve the effect in the above picture?

HTML structure CSS style font style font color border shadow Let’s take a look Here’s the specific code:

HTML:

<p>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;
    /*边框阴影*/
    /*效果1*/
    box-shadow: inset 5px 5px 20px #ccc;
    /*效果2*/
    box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000;
}

Related recommendations:

Use the box-shadow property of CSS3 to create a border shadow Effect method

css3 rounded border, border shadow_html/css_WEB-ITnose

css to achieve border shadow effect_html/css_WEB- ITnose

The above is the detailed content of Html/CSS front-end implementation of text border shadow effect example sharing. For more information, please follow other related articles on the PHP Chinese website!