我正在尝试使用CSS
,而不是使用图像精灵来制作按钮。
这些将在整个站点中使用不同的文本,因此制作大图像精灵没有意义,特别是因为按钮的大小会根据文本而变化。
这就是我能够实现的目标:(与原来的非常不同)
a {
display: inline-block;
line-height: 20px;
text-decoration: none;
font-family: 'Arial';
font-size: 19px;
font-weight: 700;
color: #ddd;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #001151;
text-shadow: 2px 2px 4px rgba(32,70,97,.55);
background: #002483;
background: linear-gradient(
to bottom,
rgba(0,36,131,1) 0%,
rgba(0,44,151,1) 27%,
rgba(0,61,166,1) 55%,
rgba(15,77,180,1) 82%,
rgba(23,83,185,1) 100%);
}
PS : (浏览器支持 >= IE9)
是否可以仅使用创建这样的按钮HTML + CSS
?