CẬP NHẬT 4
Tương tự như bản cập nhật 3 nhưng với css hiện đại (= quy tắc ít hơn) để không yêu cầu định vị đặc biệt trên phần tử giả.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>
CẬP NHẬT 3
Tất cả các câu trả lời trước đây của tôi đã được sử dụng đánh dấu thêm để tạo hiệu ứng này, điều này không nhất thiết cần thiết. Tôi nghĩ rằng đây là một giải pháp sạch hơn nhiều ... mẹo duy nhất là chơi xung quanh với các giá trị để có được vị trí đúng của bóng cũng như cường độ / độ mờ phù hợp của bóng. Đây là một câu đố mới, sử dụng các yếu tố giả :
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
CẬP NHẬT 2
Rõ ràng, bạn có thể làm điều này chỉ với một tham số phụ cho CSS hộp bóng như mọi người khác đã chỉ ra. Đây là bản demo:
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
Đây sẽ là một giải pháp tốt hơn. Tham số bổ sung được thêm vào được mô tả là:
Chiều dài thứ tư là một khoảng cách lây lan. Các giá trị dương làm cho hình dạng bóng mở rộng theo mọi hướng theo bán kính chỉ định. Các giá trị âm làm cho hình dạng bóng bị co lại.
CẬP NHẬT
Kiểm tra bản demo tại jsFiddle: http://jsfiddle.net/K88H9/4/
Những gì tôi đã làm là tạo ra một "phần tử bóng" ẩn đằng sau phần tử thực mà bạn muốn có một cái bóng. Tôi đã làm cho chiều rộng của "phần tử bóng" chính xác nhỏ hơn phần tử thực tế gấp 2 lần bóng bạn chỉ định; sau đó tôi căn chỉnh nó đúng cách.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
Câu trả lời gốc
Có, bạn có thể làm điều này với cùng một cú pháp bạn đã cung cấp. Giá trị đầu tiên kiểm soát định vị ngang và giá trị thứ hai kiểm soát định vị dọc. Vì vậy, chỉ cần đặt giá trị đầu tiên và giá trị 0pxthứ hai thành bất kỳ giá trị bù nào bạn muốn như sau:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Để biết thêm thông tin về bóng hộp, hãy kiểm tra những điều sau:
Tôi hi vọng cái này giúp được.
box-shadow-bottomkhông tồn tại và không được ai hỗ trợ. Xem nicolasgallagher.com/css-drop-shadows-without-images/demo để biết các kỹ thuật bóng hộp hợp pháp.