具有宽度限制的径向 CSS 渐变？
这是我尝试仅使用 CSS 渐变构建的按钮渐变：
这通常很容易做到，但正如您所看到的，顶部的渐变看起来更像是一个大的剪切径向渐变，因为它在中间稍微下降并且不会一直延伸到边缘。
那么，有什么想法如何用 CSS 来实现这一点吗？
Here is the button gradient I'm trying to build with just CSS gradients:
This would typically be pretty easy to do, but as you can see, the gradient at the top looks more like a large clipped radial gradient since it dips down in the middle a bit and doesn't extend all the way to the edges.
So, any ideas how to pull this off with CSS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在CSS中，径向背景中心不能位于其容器之外，但您可以通过使用渐变定位子元素来偏移径向背景。基本上你想做这样的事情：
这接近 simshaun 的优秀解决方案。但是，由于我喜欢挑战，所以我想尝试一些零额外标记的东西，我想出了这个：
http://jsfiddle.net/xB4DU/
这非常接近您的解决方案，零额外标记。它只是一个带有嵌入阴影的线性渐变，该阴影会减弱按钮的左边缘和最右边缘。
In css the radial background center cannot lie outside it's container, but you can offset the radial background through positioning a child element with the gradient. Basically you are looking to do something like this:
which is close to simshaun's excellent solution. But, since I love challenges I wanted to try something with zero extra markup, I came up with this:
http://jsfiddle.net/xB4DU/
Which comes pretty close to your to your solution with zero extra markup. It's just a linear gradient with an inset shadow that attenuates the left and rightmost edges of the button.
这肯定需要一些调整才能使其在不同的浏览器中看起来正确（我还没有真正做过）：
CSS
HTML
http://jsfiddle.net/AvkTH/3/
This would definitely take some tweaking to make it look right in different browsers (which I haven't really done):
CSS
HTML
http://jsfiddle.net/AvkTH/3/
不是完整的答案，但这可能有用。
http://css-tricks.com/css3-gradients/
Chris在这里有一个例子：
http://css-tricks.com/examples/CSS3Gradient/
具有径向渐变。这是使用 CSS3 和浏览器特定的实现，旧版浏览器可能不支持。
否则，我不知道有什么方法可以在不使用图像的情况下实现这一目标。
希望这有帮助。
鲍勃
Not a full answer, but this may be useful.
http://css-tricks.com/css3-gradients/
Chris has an example here:
http://css-tricks.com/examples/CSS3Gradient/
with a radial gradient. This is using CSS3 and the browser specific implementations which may not be supported on older browsers.
Otherwise, I don't know of a way to pull this off without the use of images.
Hope this helps.
Bob
只是为了好玩，我把它放在一起，但谁知道它在 chrome 之外会做什么。我以前从未使用过径向渐变，但这很有趣 - 我想也许我的（可怕的）CSS 可以为您的项目带来一些启发。
CSS:
}
HTML:
Just for kicks I threw this together, but who knows what it would do outside of chrome. I've never played with radial gradients before, but this was fun - I thought maybe my (Horrible) css could shed some light on your project.
CSS:
}
HTML: