Using CSS to achieve embossed effects

This time to bring the use of CSS to achieve the relief effect, the use of CSS to achieve the relief effect of the attention of the matter, the following is the actual case, a look.

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS to make the mouse move up icon rotation

Using CSS3 to realize luminous square border

Seamless scrolling effect with CSS3 for infinite loops