利用box-shadow属性实现页面层叠效果
2024-08-30 16:03:34
效果图如下
box-shadow的语法
代码展示
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
代码解释
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
*分别设置四条边（上右下左）的阴影。每个值：x偏移，y偏移，模糊距离（模糊半径），阴影尺寸，阴影颜色
最新文章
- 适配器模式 - Adapter
- 【HTML5】使用多媒体
- Java&.Net虚拟机精简(GreenJVM&GreenDotNet发布) .
- PHP PDO 安装使用
- 【转】C# string和StringBuilder的区别
- 图像检索(6)：局部敏感哈希索引(LSH)
- LabVIEW（三）：定时与触发
- 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区
- AxMIMS系统开发环境搭建
- DL中train\dev\test集
- [转载]对称加密DES和TripleDES
- Windows定位窗口对应的exe文件
- SAP HANA HDBSQL命令
- \n,\r,\t
- Even and Odd Functions
- 一个单元测试 学习 aysnc await
- Configuring Transitive IPMP on Solaris 11
- Replication--使用备份初始化订阅--请求订阅
- mongodb远程连接
- Use GitHub Desktop to get GitHub projects