CSS 盒子模型边缘阴影样式设计

概览

使用模块化组合内容，让内容更具有分类性，整体可显简洁易用，其中模块的边缘处理使用圆角锐化以及阴影投射可提升视觉的感观效果，常见的有浓重边缘阴影、轻薄边缘阴影、线条边缘阴影。

• 浓重边缘阴影 ==经典风格
• 轻薄边缘阴影 ==现代风格
• 线条边缘阴影 ==极简风格

CSS

body {
	background: #dee2e654;
}
.pageGlobal {
	max-width: 699px;
    background: #fff;
    margin: 50px auto;
    border-radius: 5px;
    padding: 30px;
    text-align: center;			
}
.shadowClassic {
    box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);			
}
.shadowModern {
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -moz-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -o-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
}
.shadowBorder {
    border: 1px solid #ddd;					
}

浓重边缘阴影效果

.shadowClassic {
    box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);			
}

轻薄边缘阴影效果

.shadowModern {
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -moz-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
    -o-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 65%);
}

线条边缘阴影效果

.shadowBorder {
    border: 1px solid #ddd;					
}

HTML

<div class="pageGlobal shadowClassic"> 经典样式<br> 浓重边缘阴影效果</div>
<div class="pageGlobal shadowModern"> 现代样式<br> 轻薄边缘阴影效果</div>
<div class="pageGlobal shadowBorder"> 极简样式<br> 线条边缘阴影效果</div>

Demo

https://static.hexingxing.cn/v3/html/box-shadow