css浮雕效果
浮雕效果
今天看百度地图看到了一个效果
感觉这个效果用在网页上应该蛮赞的,于是就学习了一下
浮雕效果需要用到伸缩盒的知识(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浮雕效果的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS 字体效果
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...
- css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...
- CSS中的text-shadow。
text-shadow(文字投影),box-shadow(容器投影),border-radius(圆角)这三个属性估计以后用的比较多,记录 一下.目前不支持IE系列(不过可以使用其他方法实现,下文有详 ...
- css字体投影
最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了.今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法.希望能对大 ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
随机推荐
- HDU 3535 AreYouBusy (混合背包)
题意:给你n组物品和自己有的价值s,每组有l个物品和有一种类型: 0:此组中最少选择一个 1:此组中最多选择一个 2:此组随便选 每种物品有两个值:是需要价值ci,可获得乐趣gi 问在满足条件的情况下 ...
- JavaScript isNaN() 函数
定义与用法: isNaN() 函数用于检查其参数是否是非数字值. 语法: isNaN(x) 描述: x是要检测的值. 返回值: 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返 ...
- 【CentOS】LAMP相关4
MySQL不支持TAB补全.mysql_history命令历史 用SOCKET形式登陆:mysql -uroot -p123456,mysql -uroot -p123456 -S /var/lib/ ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- 学习android 官方文档
9.29 1. 今天,FQ,看到android studio中文网上有一个FQ工具openVPN,我就使用了. 之前用过一个FQ工具开眼,但由于网速慢,我就弃用了. 2. 现在,我就可以FQ去andr ...
- Winform中创建超链接,点击跳转网页
代码如下: System.Diagnostics.Process ie = new System.Diagnostics.Process();ie.StartInfo.FileName = " ...
- mvc 返回值
mvc返回值为Model类型 public ActionResult Index(T result) { return View(result); } view中的对象即为页面中的Model数据,之后 ...
- dd——留言板再加验证码功能
1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表 这个不要碰, ...
- ajax和jquery
ajax的定义: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Ja ...
- php随机ip
$ip_long = array( array('607649792', '608174079'), //36.56.0.0-36.63.255.255 array('1038614528', '10 ...