html - 在 CSS 中创建带有渐变的按钮

Question

我想要实现的目标很简单。客户想要这个按钮:

http://i59.tinypic.com/207b56p.png

在以 html 格式复制的设计 PSD 中提供。我一直在玩弄不同的梯度等等，只能做到这一点:

     background-image: -webkit-gradient(linear, left top, left bottom, from(#FEC1F4), to(#FF2DFF));
     background-image: -webkit-linear-gradient(top, #FEC1F4, #FF2DFF);
     background-image: -moz-linear-gradient(top, #FEC1F4, #FF2DFF);
     background-image: -ms-linear-gradient(top, #FEC1F4, #FF2DFF);
     background-image: -o-linear-gradient(top, #FEC1F4, #FF2DFF);
     background-image: linear-gradient(to bottom, #FEC1F4, #FF2DFF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEC1F4, endColorstr=#FF2DFF);

到目前为止还差得远。

1. 有没有办法在 CSS 中制作带有渐变的按钮？
2. 如果没有，在 HTML 中使用图像作为按钮背景的正确方法是什么？因为并非所有按钮的大小都相同，并且图像背景可能会在某些地方变形。 (有什么最佳做法吗？)

Answer 1

你可以这样做:

DEMO

body {
    margin: 50px;
}
div {
    overflow: hidden;
    position: relative;
    width: 400px;
    height: 50px;
    background: -webkit-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
    background: -moz-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
    background: -ms-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
    background: -o-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
    background: linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
}
div:before, div:after {
    content:'';
    position: absolute;
    bottom: 0;
    height: 36px;
    width: 36px;
    margin-left: -36px;
    transform-origin: 100% 100%;
    transform: rotate(45deg);
    background: #FEC1F4;
}
div:before {
    left: 0;
}
div:after {
    right: 0;
}

<div></div>

*旁注:您可能需要更改颜色。