CSS浮雕效果示例代码

前言

最近，我在百度地图上看到了一个效果。我觉得它在网页上效果很好，所以我学会了。

结果如下：
浮雕效果需要对伸缩盒（flex）的了解。

Flex完全支持Chrome。如果你想添加的WebKit的前缀，其他浏览器都支持，有的不支持CSS手册，检查自己，今天我想谈谈如何创建浮雕效果。

首先附在代码上：
生活服务

主体，div
填充：0；
保证金：0；
}
标题{。
字体大小：15px；
字体微软雅黑
显示：WebKit的Flex；
WebKit项目：中心对齐；
边距：50px；
左：20px保证金；
右边距：20px；
}

字{。
WebKit的Flex：00汽车；
填充右：10px；
}
救济{。
WebKit的弯曲：1；
}
边境{。
身高：0；
宽度：100%；
边境上：1px solid # 808080；
底部边框：1px solid # FFF；
}
附上你自己的效果。
实际效果

flex样式解析：

显示：WebKit的柔性伸缩箱提供一个容器

WebKit的对齐项目：

弹性起动：弹性盒单元的侧轴（纵轴）的起始位置与线侧轴线的起始边界相近。
弹性端部：弹性盒单元的侧轴（纵轴）的起始位置靠近线的侧轴线以结束边界。
中心：弹性盒元素放置在线的侧轴（纵轴）上。（如果线的尺寸小于弹性盒元素的大小，它将在两个方向上溢出相同的长度）。

WebKit的Flex：复合材料的性能，设置或检索如何弹性盒模型对象分配空间的子元素。

没有：
非关键字的值是：00自动
{弹性生长}：定义弹性盒的膨胀比。（定义空间分布的权利）
{伸缩收缩}：定义弹性盒的收缩率。（如果溢出，按比例消化的空间）
{ Flex基础}：定义弹性框元素的默认基准值。（定义元素的宽度值，如果没有指定，则取决于元素本身的宽度值）

最后，边框属性设置在边框中以完成浮雕效果。

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，你可以留言。