logo标签列表

带有宽度限制的径向CSS渐变？

cssgradient
4
这是我试图只用CSS渐变构建的按钮渐变：
这通常很容易实现，但正如您所看到的，顶部的渐变看起来更像一个大的裁剪径向渐变，因为它在中间向下倾斜，并且没有延伸到边缘。
那么，有什么想法可以通过CSS实现这个效果吗？
4个回答
6
在css中，径向背景的中心不能超出其容器，但是您可以通过定位具有渐变的子元素来偏移径向背景。基本上您要做的是这样的：

gradient

这个解决方案与simshaun的优秀方案非常接近。但是，由于我喜欢挑战，我想尝试一些不需要额外标记的方法，我想出了这个:

alt text

http://jsfiddle.net/xB4DU/

这个方案非常接近你的解决方案，不需要额外的标记。它只是一个线性渐变和一个内阴影，可以减弱按钮的左右两端。
4
这肯定需要一些调整才能在不同的浏览器中看起来正确（我实际上还没有做过）：
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>

http://jsfiddle.net/AvkTH/3/

1

只是为了好玩，我把这个东西拼凑在一起，但谁知道它在Chrome之外会做什么。我以前从未尝试过径向渐变，但这很有趣 - 我想也许我的（可怕的）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>
1
如果你决定这么做，我刚刚发现了一个很酷的工具，可以尝试各种径向渐变选项。http://www.westciv.com/tools/radialgradients/index.html - rcravens
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接