浮雕效果

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

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

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

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

先附上代码:

  <div class="title">
<div class="word">生活服务</div>
<div class="relief">
<div class="border"></div>
</div>
</div>
 body,div{
padding:;
margin:;
}
.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:;
}
.border{
height:;
width: 100%;
border-top: 1px solid #808080;
border-bottom: 1px solid #fff;
}

再附上自己做的效果:

很实用的一个效果

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属性就可以完成浮雕效果的制作了

css浮雕效果的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS 字体效果

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...

  3. css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  4. CSS中的text-shadow。

    text-shadow(文字投影),box-shadow(容器投影),border-radius(圆角)这三个属性估计以后用的比较多,记录 一下.目前不支持IE系列(不过可以使用其他方法实现,下文有详 ...

  5. css字体投影

    最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了.今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法.希望能对大 ...

  6. 常用CSS样式属性

    01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. 进击的Python【第四章】:Python的高级应用(一)

    Python的高级应用(一) 本章内容: 内置函数 生成器 迭代器 装饰器 JSON和PICKLE的简单用法 软件目录结构规范 一.内置函数 1.数学运算类 abs(x) 求绝对值1.参数可以是整型, ...

  2. Linux SHELL 命令入门题目答案(一)

    1.如何使用shell 打印 “Hello World!” (1)如果你希望打印 !,那就不要将其放入双引号中,或者你可以通过转义字符转义(2)echo 'hello world!' 使用单引号ech ...

  3. python+Eclipse+pydev环境搭建

    python+Eclipse+pydev环境搭建   本文重点介绍使用Eclipse+pydev插件来写Python代码,  以及在Mac上配置Eclipse+Pydev 和Windows配置Ecli ...

  4. js中获取css的样式

    因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...

  5. btrace使用

    btrace使用 目录btracee是btrace的解压目录 btrace/btrace是btrace的项目工程 root@ubuntu:/usr/local/bogon/btrace# tree b ...

  6. 身份证验证JS代码

    身份证验证JS程序function checkidcardfun(code) { var city = {11: "北京", 12: "天津", 13: &qu ...

  7. 【ORACLE】字符串操作 B字符串时A的一部分

    select * from a where instr(a,b)>0;用于实现B字段是A字段中的某一部分的时候,要论顺序或者要相邻的字符. 如果想要不论顺序或者不相邻的字符时,定义函数可以实现: ...

  8. 对JavaScript闭包和原型理解

    最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这 ...

  9. HUAS_ACM 个人训练#4

    A 题目连接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=117542#problem/A 题意:给出n个单词(字符串),选出最长的字符 ...

  10. mysql不能插入中文

    mysql不能插入中文 解决办法: 1.打开终端,连接数据库  mysql -u root -p; 2.输入 satus; 查看状态 3.输入 set char set 'gbk'; 4.如果是已有的 ...