開発ツールを使用しないでボタンからCSSデザインを複製する

Question

私は素敵な見た目のボタンの写真を手に入れました。残念ながら、私はちょうどボタンの写真を持っています。だから、

ボックスの影で、このI闘争を再構築しようとしています。私は内側の影と外側の影が必要ですか？これは私がこれまで

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>

まあ私の現在のボタンが本当に醜い得たものである

、私はあなたのいくつかは私を助けることができる願っています。たぶん私はちょうど外の影といくつかの色の変更が必要です。

Answer 1

実際には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/

編集：ボックスシャドウはリストされた順番にスタックします。最初のものは上に表示され、2番目のものは下に、3番目のものは下に表示されます。

Answer 2

あなたが探しているものはdropshadowだと思います。私は少しボタンを再作成しようとしましたが、自分で調整したいかもしれません。

Here is the link。

CSS：私は即座に[speedtest.net]（http://www.speedtest.net）から来て、このボタンを認め

#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)) 
}