如何在設計中添加定製的盒子陰影

Question

我只想箱陰影像下面的圖片

，我已經嘗試了所有

box-shadow: inset 0 0px 2px rgba(0,0,0,.39);

但產量下面的代碼看起來像是

我改變了箱子的陰影值，無法得到確切的輸出。任何人都可以幫助。謝謝。

Answer 1

更好使用-webkit-box-shadow,-moz-box-shadow & box-shadow爲了更好的輸出。

input{ 
 
    width:100px; 
 
    padding:15px; 
 
    -webkit-box-shadow: inset 0px 2px 15px -5px rgba(0,0,0,0.39); 
 
-moz-box-shadow: inset 0px 2px 15px -5px rgba(0,0,0,0.39); 
 
box-shadow: inset 0px 2px 15px -5px rgba(0,0,0,0.39); 
 
}

<input type="text" />

Answer 2

.select-style { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ccc; 
 
    width: 150px; 
 
    border-radius: 1px; 
 
    overflow: hidden; 
 
    box-shadow: inset 0px 1px 5px -2px rgba(0,0,0,0.4); 
 
    background: #e5e5e5 url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%; 
 
} 
 

 
.select-style select { 
 
    padding: 5px 8px; 
 
    width: 130%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
     -moz-appearance: none; 
 
      appearance: none; 
 
} 
 

 
.select-style select:focus { 
 
    outline: none; 
 
}

<div class="select-style"> 
 
    <select> 
 
    <option value="orders">Completed Orders</option> 
 
    <option value="name">Name</option> 
 
    <option value="age">Age</option> 
 
    <option value="class">Class</option> 
 
    </select> 
 
</div>