Question

我想要完全匹配的渐变和Box阴影按钮。

我尝试了渐变css3属性（box-shadow：2px 3px 3px＃333;），但无法达到预期效果。任何人都可以建议我正确的方式。

Answer 1

我没有得到你想要的东西但是我正在根据你的问题尝试。

您可以使用2色框阴影和渐进渐变用法： -

.answer-btn {
    color: #fff;
    font-family: Arial, sans-serif;
    min-width: 267px;
    padding: 18px 0 19px;
    text-align: center;
    border: none;
    border-bottom: inset 1px #2894cc;
    border-color: -moz-use-text-color -moz-use-text-color rgba(38, 144, 202, 0.11);
    background-color: #278abe;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9Ii0yNSUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0MWJlZTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjhhYmQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background-size: 100%;
    background-image: -moz-radial-gradient(50% -25%, ellipse farthest-side, #41bee8, #268abd 100%);
    background-image: -webkit-radial-gradient(50% -25%, ellipse farthest-side, #41bee8, #268abd 100%);
    background-image: radial-gradient(ellipse farthest-side at 50% -25%, #41bee8, #268abd 100%);
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px;
    border-radius: 5px !important;
    -moz-box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
    -webkit-box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
    box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    font-size: 25px;
    font-size: 1.5625rem;
}
.answer-btn:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-transform: translate(0px, 5px);
    -ms-transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    transform: translate(0px, 5px);
}

https://jsfiddle.net/kant707/9zLLpLbg/

如何在一个按钮上使用2个盒子阴影

1 个答案: