Tôi đang cố gắng tái tạo kiểu nút trong một bản mô phỏng Photoshop có hai bóng trên đó. Bóng đầu tiên là bóng hộp bên trong nhẹ hơn (2px) và bóng thứ hai là bóng thả bên ngoài nút (5px).
Trong Photoshop, điều này thật dễ dàng - Inside Shadow và Drop Shadow. Trong CSS tôi rõ ràng có thể có cái này hoặc cái kia, nhưng không phải cả hai cùng một lúc.
Nếu bạn thử mã dưới đây trong trình duyệt, bạn sẽ thấy rằng bóng hộp đè lên bóng hộp bên trong.
Đây là bóng hộp bên trong:
box-shadow: inset 0 2px 0px #dcffa6;Và đây là những gì tôi muốn cho bóng thả trên nút:
box-shadow: 0 2px 5px #000;Đối với ngữ cảnh, đây là mã nút đầy đủ của tôi (có độ dốc và tất cả):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}