浮雕效果

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

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

浮雕效果需要用到伸缩盒的知识(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. HDU 3535 AreYouBusy (混合背包)

    题意:给你n组物品和自己有的价值s,每组有l个物品和有一种类型: 0:此组中最少选择一个 1:此组中最多选择一个 2:此组随便选 每种物品有两个值:是需要价值ci,可获得乐趣gi 问在满足条件的情况下 ...

  2. JavaScript isNaN() 函数

    定义与用法: isNaN() 函数用于检查其参数是否是非数字值. 语法: isNaN(x) 描述:     x是要检测的值. 返回值: 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返 ...

  3. 【CentOS】LAMP相关4

    MySQL不支持TAB补全.mysql_history命令历史 用SOCKET形式登陆:mysql -uroot -p123456,mysql -uroot -p123456 -S /var/lib/ ...

  4. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  5. 学习android 官方文档

    9.29 1. 今天,FQ,看到android studio中文网上有一个FQ工具openVPN,我就使用了. 之前用过一个FQ工具开眼,但由于网速慢,我就弃用了. 2. 现在,我就可以FQ去andr ...

  6. Winform中创建超链接,点击跳转网页

    代码如下: System.Diagnostics.Process ie = new System.Diagnostics.Process();ie.StartInfo.FileName = " ...

  7. mvc 返回值

    mvc返回值为Model类型 public ActionResult Index(T result) { return View(result); } view中的对象即为页面中的Model数据,之后 ...

  8. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  9. ajax和jquery

    ajax的定义: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Ja ...

  10. php随机ip

    $ip_long = array( array('607649792', '608174079'), //36.56.0.0-36.63.255.255 array('1038614528', '10 ...