CSS Emboss effect

Emboss effect

Look at the Baidu map today to see an effect

Feel this effect on the web should be pretty good, so I learned a bit

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:

1  <Divclass= "title">2         <Divclass= "word">Life Services</Div>3         <Divclass= "Relief">4             <Divclass= "Border"></Div>5         </Div>6     </Div>

1 Body,div{2 padding:0;3 margin:0;4}5 . Title{6 font-size:15px;7 font-family:"Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, Sans-serif;8 Display:-webkit-flex;9 -webkit-align-items:Center;Ten Margin-top:50px; One Margin-left:20px; A Margin-right:20px; -} -  the . Word{ - -webkit-flex:0 0 Auto; - Padding-right:10px; -} + . Relief{ - -webkit-flex:1; +} A . Border{ at 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 start position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the row.

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 the extended ratio of elastic box elements.　　

[Flex-shrink

]:

defines the shrinkage ratio of the elastic box elements.

　　　　

[flex-basis]:

defines the default datum value of the elastic box element if it overflows. (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

CSS Emboss effect