宽度约束的径向CSS渐变?
这里是按钮梯度我试图建立与刚刚CSS渐变:宽度约束的径向CSS渐变?
这通常是很容易做到,但你可以看到,顶部的梯度看起来更像一个大的修剪径向渐变,因为它在中间稍稍下沉,并且不会一直延伸到边缘。
那么,任何想法如何将这与CSS拉?
在CSS中的径向背景中心不能位于外它的容器中,但是可以通过一个子元件定位与梯度抵消径向背景。基本上你正在寻找做这样的事情:
,接近simshaun的优秀的解决方案。但是,因为我爱,我想尝试用零额外的标记什么挑战,我想出了这个:
其中涉及相当接近你,以零额外的标记解决方案。这只是一个带有阴影的线性渐变,可以减弱按钮的左侧和右侧边缘。
不是完整的答案,但这可能会有用。
http://css-tricks.com/css3-gradients/
克里斯这里有一个例子:
http://css-tricks.com/examples/CSS3Gradient/
具有径向梯度。这是使用CSS3和旧版浏览器可能不支持的浏览器特定实现。
否则,我不知道如何在不使用图像的情况下关闭此功能。
希望这会有所帮助。
鲍勃
如果你决定走这条路。我只是发现这个很酷的工具来尝试各种径向渐变选项。 http://www.westciv.com/tools/radialgradients/index.html – rcravens 2010-12-22 22:13:15
只是踢我把这个在一起,但谁知道它会做的镀铬外。我从来没有玩过径向渐变,但这很有趣 - 我想也许我的(可怕的)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>
<head>
<title></title>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>
<body>
<div id="button">Upgrade for more</div>
</body>
</html>
这肯定会采取一些调整,使它看起来在不同浏览器的权利(这我还没有真正完成) :
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
<div class="upgrade"><span></span><div>Upgrade for more</div></div>
适用于FF 3.6 Mac :-) – prodigitalson 2010-12-22 22:30:29
+1无额外标记。 – prodigitalson 2010-12-24 02:17:00