标签：取消 代码重复 near 导出 红色 变亮 col ado src
CSS减少代码重复技巧非常多，以主要包含采用相对尺寸、半透明颜色的实例来说明CSS减少代码重复技巧的一些运用。
以下为通过CSS代码实现的一个“Yes!”按钮效果以及相应的代码：
<span class=‘basisButton‘>
Yes!
</span>
与之组合的CSS代码：
.basisButton {
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
}
行高是字号的1.5倍，可以修改为：
font-size: 20px;
line-height: 1.5em;
字号也可以根据父元素字号修改为相对尺寸：
font-size: 1.25em; /* 假设父级元素字号为16px*/
line-height: 1.5em;
将padding、border-radius、box-shadow以及text-shadow值也根据字号为基准修改为相对尺寸：
.basisButton {
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
此处边框宽度并未修改，是因为放大后，按钮的边框粗细不随着放大保持在1px效果较好。
颜色是另一个重要的变数。比如，假设我们要创建一个红色的取消按钮，或者一个绿色的确定按钮，该怎么做呢?眼下，我们可能需要覆盖四条声明(border-color、background、box-shadow 和 text-shadow)，而且还有另一大难题：要根据按钮的亮面和暗面相对于主色调 #58a 变亮和变暗的程度来分别推导出其他颜色各自的亮色和暗色版本。此外，若我们想把按钮放在一个非白色的背景之上呢?显然使用灰色( gray)作投影只适用于纯白背景的情况。其实只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了：
.basisButton {
padding: .3em .8em;
border: 1px solid rgba(0, 0, 0, .1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2),
transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 125%;
line-height: 1.5;
}
如果想要覆盖掉background-color属性，就可以得到不同眼的版本按钮。
<span class=‘basisButton red‘>
Yes!
</span>
.red{
background-color:#c00;
}
标签：取消 代码重复 near 导出 红色 变亮 col ado src
原文地址：https://www.cnblogs.com/f6056/p/11655736.html
