概览

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

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

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


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注