具有宽度约束的径向CSS渐变？
[英]Radial CSS gradient with width constraints?
问题描述
Here is the button gradient I'm trying to build with just CSS gradients: 
这是我试图用CSS渐变构建的按钮渐变：
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? 那么，任何想法如何用CSS来解决这个问题？
4 个解决方案
解决方案1
6 已采纳 2010-12-24 00:34:42
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. 在css中，径向背景中心不能位于其容器之外，但您可以通过使用渐变定位子元素来偏移径向背景。 Basically you are looking to do something like this: 基本上你想要做这样的事情：
which is close to simshaun's excellent solution. 这是接近simshaun的优秀解决方案。 But, since I love challenges I wanted to try something with zero extra markup, I came up with this: 但是，既然我喜欢挑战，我想尝试零额外加价的东西，我想出了这个：
http://jsfiddle.net/xB4DU/ 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. 它只是一个带有插入阴影的线性渐变，可以衰减按钮的左右边缘。
解决方案2
4 2010-12-22 22:27:24
This would definitely take some tweaking to make it look right in different browsers (which I haven't really done): 这肯定需要一些调整才能使它在不同的浏览器中看起来正确（我还没有真正做过）：
CSS CSS
.upgrade {
background: #FF3397;
color: #FFF;
float: left;
height: 30px;
line-height: 30px;
position: relative;
text-align: center;
width: 160px;
-webkit-box-shadow: 0px 0px 3px #999;
-moz-box-shadow: 0px 0px 3px #999;
box-shadow: 0px 0px 3px #999;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px -1px 3px #E60071;
filter: dropshadow(color=#666, offx=2, offy=-2);
font-family: Verdana, Sans-Serif;
font-size: 12px;
font-weight: bold;
}
.upgrade span {
background-image: -moz-radial-gradient(50% 50% 90deg,ellipse contain, #FFFFFF, rgba(255, 255, 255, 0));
background-image: -webkit-gradient(radial, 50% -50%, 51, 50% 0, 110, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
display: block;
height: 100px;
left: -50px;
position: absolute;
top: -70px;
width: 260px;
z-index: 1;
}
.upgrade div {
z-index 2;
} HTML HTML
<div class="upgrade"><span></span><div>Upgrade for more</div></div>解决方案3
1 2010-12-22 22:11:09
Not a full answer, but this may be useful. 不是完整的答案，但这可能有用。
http://css-tricks.com/css3-gradients/ http://css-tricks.com/css3-gradients/
Chris has an example here: 克里斯在这里有一个例子：
http://css-tricks.com/examples/CSS3Gradient/ 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. 这是使用CSS3和浏览器特定的实现，旧浏览器可能不支持。
Otherwise, I don't know of a way to pull this off without the use of images. 否则，我不知道如何在不使用图像的情况下将其关闭。
Hope this helps. 希望这可以帮助。
Bob 短发
解决方案4
1 2010-12-22 22:19:13
Just for kicks I threw this together, but who knows what it would do outside of chrome. 只是为了踢，我把它扔在一起，但是谁知道它会在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可以为你的项目提供一些启示。
CSS: CSS：
#button {
display: table;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 50px auto;
padding: 10px;
background:
-webkit-gradient(radial, 50% -200%, 180, 50% -110%, 35, from(#f81499), to(#fff), color-stop(.7,#f81499));
color: #fff;
text-shadow: 0px -1px 0 rgba(0,0,0,.25);
font-family: "droid sans", sans-serif;
font-size: 13px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
} }
HTML: HTML：
<html>
<head>
<title></title>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>
<body>
<div id="button">Upgrade for more</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.