不使用开发人员工具从按钮克隆CSS设计
不使用开发人员工具从按钮克隆CSS设计
提问于 2017-08-02 02:29:30
我得到了一个漂亮的按钮的图片，我想得到它的CSS。不幸的是，我只是得到了按钮的图片。
因此，当我试图重建这个的时候，我会与长方体的阴影作斗争。我需要一个内部阴影和一个外部阴影，不是吗？
这就是我到目前为止所得到的
body {
font-family: "Arial";
background-color: gray;
}
#box{
width: 200px;
height: 40px;
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
border-style: solid;
border-width: 1px;
border-radius: 8px;
border-color: #99ff99;
background: linear-gradient(#262626, #00b33c);
box-shadow: inset 0px -7px 7px #99ff99;
}<div id="box">
TEST AGAIN
</div>
好吧，我现在的按钮看起来真的很难看，我希望你们中的一些人能帮助我。也许我只需要外部阴影和一些颜色变化..
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-02 02:45:33
要获得这种效果，您可以实际堆叠box-shadows。此外，不要害怕使用rgba值处理阴影颜色的不透明度：
CSS：
body {
font-family: "Arial";
background-color: gray;
font-size: 13px;
line-height:3;
}
#box {
width: 200px;
height: 40px;
letter-spacing:1px;
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
border-radius: 8px;
border-color: #99ff99;
background: linear-gradient(#262626, #00b33c);
box-shadow: inset 0px -7px 7px rgba(255,255,255, .2), 0 0px 4px #fff, 0px 0px 15px #00b33c;
}<div id="box">
TEST AGAIN
</div>
这就是问题所在：https://jsfiddle.net/Lby8w1h8/1/
编辑:长方体阴影堆叠的顺序是listed...so第一个将在上面，第二个在下面，第三个在下面，依此类推。
Stack Overflow用户
发布于 2017-08-02 02:46:40
我想你要找的是一个dropshadow。我试着重新创建了一点按钮，但您可能也想自己调整它。
CSS：
#box{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 25px;
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
border-style: solid;
border-width: 1px;
border-radius: 8px;
border-color: #99ff99;
background: linear-gradient(#262626, #00b33c);
box-shadow: inset 0px -3px 7px #99ff99;
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-filter: drop-shadow(0px 0px 8px rgba(0, 231, 255, 0.8))
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45445232
复制相关文章
相似问题
腾讯云开发者
