css完成多边形和梯形盒黑影技能

日期:2021-03-01 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

1般状况下,大家给块状元素(4边形)加上黑影款式,立即用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);便可以了,可是总有1些要求是那末的非常,比如下图:

规定给这样的梯形盒外围加黑影,第1眼觉得也没啥非常的,可是搞起来就了解多烦了。总之我是折腾了好1会儿,最终只能用下面这样完成了。

HTML和CSS(sass)编码:

        <div class="m-tab-page-box cf">
            <div class="m-tab-page">
                <a class="m-page-item" href="">Set Physical Presence </a>
                <a class="m-page-item current" href="">Set Prodcut Tax Code </a>
            </div>
            <div class="m-tab-page-cover"></div>
        </div>

        <div class="tab-search-block">
            <div style="height: 160px;"></div>
        </div>
.m-tab-page-box{
    position: relative;
}
.m-tab-page-cover{
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: ⑶px;
}
.m-tab-page {
    float: left;
    border-bottom: none;
    margin-bottom: 0;
    display: inline-block;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    height: 38px;

    .m-page-item {
        display: block;
        padding: 10px 20px;
        float: left;
        color: #222;
        font-weight: bold;
        margin-bottom: 0;
        background: #edf0f2;

        &.current {
            background: #fff;
            border: none;

        }
    }

}

.tab-search-block{
    background: #fff;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

}

完成思路:'.m-tab-page'设成行内元素,加黑影,'.tab-search-block'加黑影,关键是在'.m-tab-page-box'中加上1个'.m-tab-page-cover',该元素的功效便是遮挡住'.m-tab-page'元素的底部黑影,留意'.m-tab-page-cover'的高宽比为盒黑影外扩散的间距。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS Sticky Footer完成编码 返回下一篇:没有了