Tôi đang cố gắng sao chép một kiểu nút trong Photoshop mô phỏng có hai bóng trên đó. Cái bóng đầu tiên là một bóng đèn hộp bên trong (2px), và cái thứ hai là một bóng đổ bên ngoài nút (5px).Có cách nào để sử dụng hai bóng hộp CSS3 trên một phần tử không?
Trong Photoshop này là dễ dàng - Inner Shadow và Drop Shadow. Trong CSS tôi dường như có thể có một hoặc khác, nhưng không phải cả hai cùng một lúc.
Nếu bạn thử mã bên dưới trong trình duyệt, bạn sẽ thấy rằng hộp đổ bóng sẽ ghi đè hộp bóng nội bộ.
Đây là cái bóng hộp hình chữ nhật:
box-shadow: inset 0 2px 0px #dcffa6;
Và đây là những gì tôi muốn cho các bóng thả vào nút:
box-shadow: 0 2px 5px #000;
Đối với bối cảnh, đây là mã nút đầy đủ của tôi (với gradient 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;
}
Chú thích, cảm ơn! Đó là tốt đẹp và dễ dàng. –
Bạn được chào đón; vui mừng đã giúp! =) –
Cũng đề cập đến bóng đầu tiên được khai báo là của (các) sau đây http://jsfiddle.net/webtiki/s9pkj/ –