HTML – 具有特定停止的CSS3水平淡入阴影？

概述因此,我试图使用纯CSS来制作一个覆盖标签的轻微阴影.我希望它在20％和80％的两端淡出.我一直在努力实现这一点,但到目前为止我发现自己对结果并不满意. 这是我想要的图像： HTML： <button type="button" class="btn"> <span>Button Text</span> <span class="buttonshadow"></span></bu 因此,我试图使用纯CSS来制作一个覆盖标签的轻微阴影.我希望它在20％和80％的两端淡出.我一直在努力实现这一点,但到目前为止我发现自己对结果并不满意.

这是我想要的图像：

HTML：

<button type="button" >    <span>button Text</span>    <span ></span></button>

CSS：

.btn {    -webkit-border-radius: 0px;    -webkit-border-bottom-right-radius: 5px;    -webkit-border-bottom-left-radius: 5px;    -moz-border-radius: 0px;    -moz-border-radius-bottomright: 5px;    -moz-border-radius-bottomleft: 5px;    border-radius: 0px;    border-bottom-right-radius: 5px;    border-bottom-left-radius: 5px;    Font-size: 24px;    padding: 6px 16px 7px;    line-height: 1;    position: relative;    color: #ffffff;    background-color: #5CBCEC;    border-color: #5CBCEC;    display: inline-block;    margin-bottom: 0;    background-image: none;    border: 1px solID transparent;    white-space: nowrap;    overflow: visible;}.buttonshadow {    wIDth: 120%;    height: 100%;    position: absolute;    top: 0;    left: -10%;}.buttonshadow:before {    content: "";    position: absolute;    z-index: 1;    top: -1px;    left: 0;    wIDth: 100%;    height: 5px;    background: -webkit-radial-gradIEnt(50% -3%,ellipse cover,rgba(00,00,0.2),rgba(97,97,0.0) 40%);    background: radial-gradIEnt(ellipse at 50% 0%,rgba(0,0.4),0) 70%);}

到目前为止,这是我现在的小提琴：JSFiddle

显然这看起来不一样.任何帮助深表感谢！！！

解决方法 如果我正确理解了问题,你想要边缘按钮外的渐变.

问题出在.buttonshadow和.buttonshadow：之前

我把它改成了这个

.buttonshadow {    wIDth: 100%;    height: 100%;    position: absolute;    top: 0;    left: -25px;}.buttonshadow:before {    content: "";    position: absolute;    z-index: 1;    top: -1px;    left: 0;    wIDth: 130%;    height: 5px;    background: -webkit-radial-gradIEnt(50% -3%,rgba(55,55,1),0) 80%);}

检查小提琴

http://jsfiddle.net/rLsbC/1/

然后,你可以摆弄渐变,以获得更多你想要的东西.
希望这可以帮助！

注意：如果要更改渐变的宽度,请更改.buttonshadow中的宽度：之前和.buttonshadow中的left属性

总结

以上是内存溢出为你收集整理的HTML – 具有特定停止的CSS3水平淡入阴影？全部内容，希望文章能够帮你解决HTML – 具有特定停止的CSS3水平淡入阴影？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。