css relief effect_html/css_WEB-ITnose

Relief effect

I saw an effect when I looked at Baidu map today

I felt that this effect would be great when used on a web page, so I learned about it

The embossing effect requires knowledge of the telescopic box (flex)

flex is available in chrome If it is fully supported, you need to add the -webkit- prefix. Some other browsers support it and some do not. Check the css manual yourself. Today I mainly want to talk about how to create the relief effect

Attached is the code first:

1  <div class="title">2         <div class="word">生活服务</div>3         <div class="relief">4             <div class="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;10     margin-top: 50px;11     margin-left: 20px;12     margin-right: 20px;13 }14 15 .word{16     -webkit-flex: 0 0 auto;17     padding-right: 10px;18 }19 .relief{20     -webkit-flex: 1;21 }22 .border{23     height: 0;24     width: 100%;25     border-top: 1px solid #808080;26     border-bottom: 1px solid #fff;27 }

Attached is the effect I made:

A very practical effect

flex style analysis:

display:-webkit-flex Provides a container for the flex box

-webkit-align- items:

flex-start: The border of the starting position of the cross axis (vertical axis) of the flex box element is close to the starting border of the cross axis of the row. flex-end: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the end boundary of the cross axis of the row. center: The flexbox element is centered on the cross axis (vertical axis) of the row. (If the size of the row is smaller than the size of the flexbox element, it will overflow the same length in both directions).

-webkit-flex:Composite attribute. Sets or retrieves how space is allocated for child elements of the flexbox model object.

none: The calculated value of the none keyword is: 0 0 auto [flex-grow]: Defines the expansion ratio of the flex box element. (Define space allocation rights) [ flex-shrink ]: Define the shrinkage ratio of flex box elements. (If it overflows, the extra space will be digested in proportion) [flex-basis]: Define the default basis value of the flex box element. (Define the width value of the element. If not specified, it depends on the width value of the element itself)

Finally, set the border attribute in the border to complete the production of the relief effect