css浮雕效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:38:42
Original
1549 Leute haben es durchsucht

 

浮雕效果

 

今天看百度地图看到了一个效果

感觉这个效果用在网页上应该蛮赞的,于是就学习了一下

浮雕效果需要用到伸缩盒的知识(flex)

flex在chrome是完全支持的,要加-webkit-前缀,其他的浏览器有的支持有的不支持,自己去查css手册,今天主要想讲一下怎么制作出浮雕效果

先附上代码:

1  <div class="title">2         <div class="word">生活服务</div>3         <div class="relief">4             <div class="border"></div>5         </div>6     </div>
Nach dem Login kopieren

 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 }
Nach dem Login kopieren

再附上自己做的效果:

很实用的一个效果

flex样式解析:

display:-webkit-flex     提供一个伸缩盒的容器

 

 

-webkit-align-items:

flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

 

-webkit-flex:复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

none: none关键字的计算值为: 0 0 auto [ flex-grow ]: 定义弹性盒子元素的扩展比率。   (定义空间的分配权) [ flex-shrink ]: 定义弹性盒子元素的收缩比率。  (若溢出时,按照比例消化多出来的空间) [ flex-basis ]: 定义弹性盒子元素的默认基准值。    (定义元素的宽度值,若没有指定则取决与元素本身宽度值)

 

最后在border里面再设置border属性就可以完成浮雕效果的制作了

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage