利用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: 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;
}

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

再附上自己做的效果：

很实用的一个效果

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实现浮雕效果示例代码相关推荐

用html浮雕效果图,利用css实现浮雕效果示例代码
前言最近在看百度地图看到了一个效果,感觉这个效果用在网页上应该蛮赞的,于是就学习了一下. 效果图如下: 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-webki ...
用html浮雕效果图,怎么利用css实现浮雕效果
怎么利用css实现浮雕效果发布时间:2021-03-20 09:35:58 来源:亿速云阅读:71 作者:小新这篇文章主要介绍了怎么利用css实现浮雕效果,具有一定借鉴价值,感兴趣的朋友可以参考 ...
html风车相册代码,Css Html 大风车(示例代码)
简介这篇文章主要介绍了Css Html 大风车(示例代码)以及相关的经验技巧,文章约3675字,浏览量138,点赞数2,值得参考! div{ border-radius: 50%;position: ...
利用css完成表格的代码,css 表格(示例代码)
1.给元素的display属性添加为以下值 table使该元素按table样式渲染 table-row使该元素按tr样式渲染 table-cell使该元素按td样式渲染 table-row-group ...
html与css知识总结,html和css知识总结(示例代码)
今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签] 1>单标签文档头,告诉浏览器这是一个网页 br换行 ...
表格树形结构 HTML 语言 CSS,HTML介绍(示例代码)
一.什么是HTML html(hypertext makeup language),中文名为超文本标记语言,他是一门能被浏览器解析成网页的标签语言,当我们使用浏览器访问网页时,那边就有一个服务端给你发 ...
两端对齐的css,CSS两端对齐(示例代码)
flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以使用主轴对齐justify-content的两端对齐属性space-betweenjusti ...
css 对话框水平居中,CSS——水平居中设置(示例代码)
一.行内元素如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 二.块状元素当被设置元素为块状元素时用 text-align:cen ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...

利用css实现浮雕效果示例代码

利用css实现浮雕效果示例代码相关推荐

最新文章

热门文章