Example code for embossed effects with CSS

This article mainly introduces the use of CSS how to achieve the effect of relief, the text gives a detailed sample code and explanation, I believe that there is a certain reference value for everyone, interested in the following people to see together.

Objective

Recently in the Baidu map to see an effect, feel the effect on the Web page should be pretty good, so I learned a bit.

As follows:

The Emboss effect requires knowledge of the telescopic box (FLEX)

Flex in Chrome is fully supported, to add-webkit-prefix, some other browsers support some do not support, to check the CSS manual, today I want to talk about how to create a relief effect

Attach the code First:

<p class= "title" >        <p class= "word" > Life Services </p>        <p class= "Relief" >            <p class= " Border "></p>        </p>    </p>

body,p{     padding:0;     margin:0; }.title{    font-size:15px;    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, Sans-serif;    Display:-webkit-flex;    -webkit-align-items:center;    margin-top:50px;    margin-left:20px;    margin-right:20px;}. word{    -webkit-flex:0 0 auto;    padding-right:10px;}. relief{    -webkit-flex:1;}. border{    height:0;    width:100%;    border-top:1px solid #808080;    border-bottom:1px solid #fff;}

Attach yourself to the effect:

A very practical effect.

Flex Style parsing:

Display:-webkit-flex provides a container for a telescopic box

-webkit-align-items:

Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.

Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.

Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).

-webkit-flex: Composite properties. Sets or retrieves how the child elements of a flexible box model object allocate space.

None

The value of the None keyword evaluates to: 0 0 Auto

[Flex-grow]: Defines an extended ratio of elastic box elements. (Define the allocation of space)

[Flex-shrink]: Defines the shrinkage ratio of the elastic box element. (if overflow, the amount of space to be digested in proportion)

[Flex-basis]: Defines the default datum value for the elastic box element. (Defines the width value of the element, if not specified, depends on the width value of the element itself)

Finally, in the border the border property can be set to complete the relief effect of the production