运用css完成浮雕实际效果示例编码

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

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

序言

近期在看百度搜索地形图看到了1个实际效果,觉得这个实际效果用在网页页面上应当蛮赞的,因而就学习培训了1下。

实际效果图以下:

浮雕实际效果必须用到伸缩盒的专业知识(flex)

flex在chrome是彻底适用的,要加-webkit-前缀,别的的访问器有的适用有的不适用,自身去查css手册,今日关键想讲1下如何制做出浮雕实际效果

先附上编码:

<div class="title">
        <div class="word">日常生活服务</div>
        <div class="relief">
            <div class="border"></div>
        </div>
    </div>
body,div{
     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;
}

再附上自身做的实际效果:

很好用的1个实际效果

flex款式分析:

display:-webkit-flex     出示1个伸缩盒的器皿

-webkit-align-items:

flex-start:延展性盒子元素的侧轴(纵轴)起止部位的界限紧靠住该行的侧轴起止界限。

flex-end:延展性盒子元素的侧轴(纵轴)起止部位的界限紧靠住该行的侧轴完毕界限。

center:延展性盒子元素在该行的侧轴(纵轴)上垂直居中置放。(假如该行的规格小于延展性盒子元素的规格,则会向两个方位外溢同样的长度)。

-webkit-flex:复合型特性。设定或查找延展性盒实体模型目标的子元素怎样分派室内空间。

none:

none重要字的测算值为: 0 0 auto

[ flex-grow ]:界定延展性盒子元素的拓展比率。   (界定室内空间的分派权)

[ flex-shrink ]:界定延展性盒子元素的收拢比率。  (若外溢时,依照占比消化吸收多出来的室内空间)

[ flex-basis ]:界定延展性盒子元素的默认设置标准值。    (界定元素的宽度值,若沒有特定则取决与元素自身宽度值) 

最终在border里边再设定border特性便可以进行浮雕实际效果的制做了

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。

上一篇:css3 引流矩阵的应用详解 返回下一篇:没有了