这是我的按钮设计(例如不同的背景,缩放 ~1500% 和实际大小)。我如何使用单个元素和一些 css3 或最少的附加元素来做到这一点? CSS 大师,有人吗?
最佳答案
HTML
<a href="#" class="button"></a>
CSS
.button {
position: relative;
z-index: 1;
display: block;
width: 22px;
height: 22px;
background: -webkit-linear-gradient(#f5f0ee, #e7ddd7);
background: -ms-linear-gradient(#f5f0ee, #e7ddd7);
background: -moz-linear-gradient(#f5f0ee, #e7ddd7);
background: linear-gradient(#f5f0ee, #e7ddd7);
border: 1px solid #c0b9b3;
border-radius: 3px;
box-shadow: inset 0px 1px #fcfbfb, 0px 1px rgba(0, 0, 0, 0.3);
}
.button:before {
content: "";
position: absolute;
left: -4px;
top: -4px;
z-index: -1;
padding: 4px;
width: 22px;
height: 22px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: linear-gradient(#f5f0ee, #e7ddd7);
border-radius: 3px;
box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}
JSFiddle .
我认为我唯一无法得到的是带有渐变的边框。
关于html - 我可以用 css3 和 html5 得到它吗? (渐变背景、边框渐变、透明度),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11843993/