เป็นไปได้ไหมที่จะมีเพียง box-shadow ด้านเดียวของ div? โปรดทราบว่าฉันกำลังพูดถึงเงากล่องที่ใส่ไว้ที่นี่ไม่ใช่เงากล่องด้านนอกปกติ

ตัวอย่างเช่นใน JSFiddle ต่อไปนี้คุณจะเห็นว่าเงาที่แทรกอยู่ปรากฏขึ้นทั้ง 4 ด้านในองศาที่แตกต่างกัน

ฉันจะทำให้มันแสดงเฉพาะที่ด้านบนได้อย่างไร หรือมากที่สุดเท่านั้นที่ด้านบนและด้านล่าง?

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>

นี่คือสิ่งที่คุณกำลังมองหา มีตัวอย่างสำหรับแต่ละด้านที่คุณต้องการด้วยเงา

.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);
}

ดูตัวอย่างสำหรับตัวอย่างเพิ่มเติม:

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>

เคล็ดลับคือ.box-innerด้านในที่สองซึ่งมีความกว้างมากกว่าต้นฉบับ.boxและbox-shadowใช้กับสิ่งนั้น

จากนั้นเพิ่มช่องว่างภายในเพิ่มเติม.textเพื่อชดเชยความกว้างที่เพิ่มเข้ามา

นี่คือลักษณะของตรรกะ:

และนี่คือวิธีการทำงานใน CSS:

ใช้ความกว้างสูงสุด.inner-boxเพื่อไม่ให้.boxกว้างขึ้นและoverflowเพื่อให้แน่ใจว่าส่วนที่เหลือถูกตัด:

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

110% กว้างกว่าพาเรนต์ซึ่ง 100% ในบริบทของเด็ก (ควรเท่ากันเมื่อพาเรนต์.boxมีความกว้างคงที่เป็นต้น) ระยะขอบลบประกอบขึ้นเพื่อความกว้างและทำให้องค์ประกอบอยู่ตรงกลาง (แทนที่จะซ่อนเฉพาะส่วนที่ถูกต้อง):

.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;
}

และเพิ่มช่องว่างบนแกน X เพื่อให้กว้างขึ้น.inner-box:

.text {
    padding: 20px 40px;
}

นี่คือ Fiddle ที่ใช้งานได้

หากคุณตรวจสอบ Fiddle คุณจะเห็น:

ค่อนข้างสายไปนิด แต่คำตอบที่ซ้ำกันที่ไม่จำเป็นต้องมีการเปลี่ยนแปลงขยายหรือเพิ่ม divs พิเศษสามารถพบได้ที่นี่: มีปัญหากับกล่องเงาภาพประกอบด้านล่างเท่านั้น ข้อความระบุว่า "ใช้ค่าลบสำหรับความยาวที่สี่ซึ่งกำหนดระยะการแพร่กระจายซึ่งมักถูกมองข้าม แต่เบราว์เซอร์หลักทั้งหมดรองรับ"

จากซอของผู้ตอบ:

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

นี่มาใกล้นิดเดียว

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

ลองดูอาจมีประโยชน์ ...

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;  

ด้านบนCSSทำให้คุณมีเงาของกล่องอยู่ด้านล่าง
คุณสามารถแดงเพิ่มเติมได้ที่นี่

นี่อาจไม่ใช่สิ่งที่คุณกำลังมองหา แต่คุณสามารถสร้างเอฟเฟกต์ที่คล้ายกันมากโดยใช้rgbaร่วมกับlinear-gradient:

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

สิ่งนี้จะสร้างการไล่ระดับสีเชิงเส้นจากสีดำที่มีความทึบ 50% ( rgba(0,0,0,.5)) ถึงโปร่งใส ( rgba(0,0,0,0)) ซึ่งจะเริ่มโปร่งใส 30% จากด้านบน คุณสามารถเล่นกับค่าเหล่านั้นเพื่อสร้างเอฟเฟกต์ที่คุณต้องการ คุณสามารถวางไว้ที่ด้านอื่นได้โดยการเพิ่มค่า deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) หรือเปลี่ยนสีไปรอบ ๆ หากคุณต้องการเงาที่ซับซ้อนจริงๆเช่นมุมต่างๆในด้านต่างๆคุณสามารถเริ่มการแบ่งชั้นlinear-gradientได้

นี่คือตัวอย่างข้อมูลเพื่อดูการทำงาน:

.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 เฉพาะด้านบน?

#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%;
        }