Có thể bằng cách nào đó mà chỉ có hộp bóng bên trong ở một bên của div không? Lưu ý rằng tôi đang nói về một hình chữ nhật hộp bóng ở đây, không phải là bình thường bên ngoài hộp bóng.

Ví dụ, trong JSFiddle sau đây, bạn sẽ thấy bóng bên trong xuất hiện ở cả 4 phía, với các mức độ khác nhau.

Làm cách nào để tôi chỉ hiển thị ở trên cùng? Hay nhiều nhất CHỈ ở trên và dưới?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Đây là những gì bạn đang tìm kiếm. Nó có các ví dụ cho mỗi bên bạn muốn với một cái bóng.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Xem đoạn mã để biết thêm ví dụ:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Bí quyết là một thứ hai .box-innerbên trong, có chiều rộng lớn hơn so với bản gốc .boxvà box-shadowđược áp dụng cho điều đó.

Sau đó, thêm nhiều phần đệm vào .textđể bù cho chiều rộng đã thêm.

Đây là cách logic trông:

Và đây là cách nó được thực hiện trong CSS:

Sử dụng chiều rộng tối đa .inner-boxđể không làm .boxrộng hơn và overflowđể đảm bảo phần còn lại được cắt bớt:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% rộng hơn giá trị gốc là 100% trong ngữ cảnh của trẻ ( .boxví dụ: phải bằng nhau khi vùng phụ huynh có chiều rộng cố định). Lề âm tạo nên chiều rộng và khiến phần tử được căn giữa (thay vì chỉ ẩn phần bên phải):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Và thêm một số khoảng đệm trên trục X để tạo ra chiều rộng hơn .inner-box:

.text {
    padding: 20px 40px;
}

Đây là một Fiddle đang hoạt động.

Nếu bạn kiểm tra Fiddle, bạn sẽ thấy:

Khá muộn, nhưng bạn có thể tìm thấy một câu trả lời trùng lặp không yêu cầu thay đổi phần đệm hoặc thêm các div bổ sung tại đây: Chỉ gặp sự cố với phần dưới của Hộp-shadow Inset . Nó nói, "Sử dụng giá trị âm cho độ dài thứ tư để xác định khoảng cách lan truyền. Điều này thường bị bỏ qua, nhưng được hỗ trợ bởi tất cả các trình duyệt chính"

Từ của người trả lời fiddle :

box-shadow: inset 0 -10px 10px -10px #000000;

Điều này đến gần một chút.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

hãy thử nó, có thể hữu ích ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

ở trên CSSvì bạn có một bóng hộp ở dưới cùng.
bạn có thể đỏ nhiều hơn Tại đây

Đây có thể không phải là thứ chính xác bạn đang tìm kiếm, nhưng bạn có thể tạo ra một hiệu ứng tương tự bằng cách sử dụng rgbakết hợp với linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Điều này tạo ra một gradient tuyến tính từ màu đen với độ mờ 50% ( rgba(0,0,0,.5)) đến trong suốt ( rgba(0,0,0,0)) bắt đầu có độ trong suốt 30% từ trên xuống. Bạn có thể chơi với các giá trị đó để tạo ra hiệu ứng mong muốn của mình. Bạn có thể đặt nó ở một mặt khác bằng cách thêm giá trị deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) hoặc chuyển đổi màu xung quanh. Nếu bạn muốn các bóng thực sự phức tạp như các góc khác nhau ở các phía khác nhau, bạn thậm chí có thể bắt đầu phân lớp linear-gradient.

Đây là một đoạn mã để xem nó hoạt động:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Inset Box Shadow chỉ ở phía trên?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }