今天分享一段 CSS 样式,让 Begin 主题的“提交按钮”圆角显示并添加弥散阴影。在主题目录下找到 style.css 文件,找到以下这段代码:
#respond #submit {
background: #fff;
width: 50%;
margin: 5px 0 15px 0;
padding: 8px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 2px;
-webkit-appearance: none;
}
替换成下面这段代码即可:
#respond #submit {
background: #38a3fd;
width: 15%;
margin: 5px 0 15px 0;
padding: 8px;
cursor: pointer;
border: 1px solid #38a3fd;
border-radius: 25px;
-webkit-appearance: none;
color: #fff;
box-shadow: 0 4px 12px rgba(56,163,253,0.6);
}
最终效果:
如果是设计从业者,应该都了解过弥散阴影吧,特别是 UI 设计,近年应用很广泛,是一个形状图层通过羽化和调整透明度形成的一种阴影。比直接的投影更加柔和、有层次感,可以提升界面的品质。
这个样式还不错哦