Example code for realizing relief effect using css

This article mainly introduces how to use CSS to achieve the relief effect. The article gives detailed sample codes and explanations. I believe it has certain reference value for everyone. Friends who are interested can take a look below. .

Preface

Recently, I saw an effect while looking at Baidu Maps. I felt that this effect would be quite good when used on a web page, so I studied it.

The renderings are as follows:

The relief effect requires the knowledge of telescopic boxes (flex)

flex It is fully supported in chrome. 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 an embossing effect.

Attached first Above code:

<p class="title">
        <p class="word">生活服务</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;
}

and then attach the effect you made:

A very practical effect

flex style analysis:

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

-webkit-align-items:

flex-start: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the starting boundary 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 properties. 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]: Definition The expansion ratio of the flexbox element. (Define space allocation rights)

[flex-shrink]: Define the shrinkage ratio of the flexible box element. (If it overflows, the extra space will be digested in proportion)

[flex-basis]: Defines 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

More use of css Please pay attention to the PHP Chinese website for related articles on the sample code to achieve the relief effect!