Use css to achieve relief effect

This time I will bring you the use of css to achieve the relief effect, and the precautions for using css to achieve the relief effect. The following is a practical case, let's take a look.

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;
}

Attach the effect you made:

A very practical effect

flex style analysis :

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

-webkit-align-items:

flex-start: The side of the flexible box element The boundary of the starting position of the axis (vertical axis) is immediately adjacent 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. Set or retrieve

Flexible box modelHow the child elements of the object allocate space.

none: The calculated value of the

none keyword is: 0 0 auto

[flex-grow]: Defines the expansion ratio of the flex box element . (Define the allocation rights of space)

[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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS to make the icon rotate when the mouse moves up

Use CSS3 to realize the luminous square border

Use CSS3 to achieve infinite loop seamless scrolling effect

The above is the detailed content of Use css to achieve relief effect. For more information, please follow other related articles on the PHP Chinese website!