วิธีการสร้างเงาเพียงด้านเดียวขององค์ประกอบ?

มีวิธีวางเงาที่ด้านล่างเท่านั้นหรือไม่ ฉันมีเมนูที่มี 2 ภาพติดกัน ฉันไม่ต้องการเงาที่เหมาะสมเพราะมันซ้อนทับภาพที่ถูกต้อง ฉันไม่ชอบที่จะใช้ภาพสำหรับสิ่งนี้ดังนั้นจึงมีวิธีที่จะวางเฉพาะที่ด้านล่าง:

box-shadow-bottom: 10px #FFF; หรือคล้ายกัน

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

อัพเดท 4

เช่นเดียวกับการอัปเดต 3 แต่ด้วย css ที่ทันสมัย ​​(= กฎน้อยลง) ดังนั้นจึงไม่จำเป็นต้องมีการวางตำแหน่งพิเศษในองค์ประกอบหลอก

#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>

อัพเดท 3

คำตอบก่อนหน้าทั้งหมดของฉันใช้มาร์กอัปพิเศษเพื่อสร้างเอฟเฟกต์นี้ซึ่งไม่จำเป็นต้องทำ ผมคิดว่านี้มากแก้ปัญหาการทำความสะอาด ... เคล็ดลับเพียงอย่างเดียวคือการเล่นรอบกับค่าที่จะได้รับการวางตำแหน่งที่เหมาะสมของเงาเช่นเดียวกับความแรงที่เหมาะสม / ความทึบของเงา นี่คือซอใหม่โดยใช้องค์ประกอบหลอก :

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

อัพเดท 2

เห็นได้ชัดว่าคุณสามารถทำได้โดยใช้พารามิเตอร์พิเศษใน CSS-shadow ตามที่ทุกคนเพิ่งชี้ไป นี่คือตัวอย่าง:

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;

นี่จะเป็นทางออกที่ดีกว่า พารามิเตอร์พิเศษที่เพิ่มเข้ามามีคำอธิบายดังนี้:

ความยาวที่สี่คือระยะการแพร่กระจาย ค่าบวกทำให้รูปร่างเงาขยายในทุกทิศทางตามรัศมีที่ระบุ ค่าลบทำให้รูปร่างเงาหดตัว

UPDATE

ตรวจสอบตัวอย่างที่ jsFiddle: http://jsfiddle.net/K88H9/4/

สิ่งที่ฉันทำคือสร้าง "องค์ประกอบเงา" ที่จะซ่อนอยู่ด้านหลังองค์ประกอบจริงที่คุณต้องการมีเงา ฉันสร้างความกว้างของ "องค์ประกอบเงา" ให้มีความกว้างน้อยกว่าองค์ประกอบจริงตาม 2 เท่าของเงาที่คุณระบุ จากนั้นฉันจัดตำแหน่งให้ถูกต้อง

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

คำตอบเดิม

ใช่คุณสามารถทำได้ด้วยไวยากรณ์เดียวกับที่คุณให้ไว้ ค่าแรกจะควบคุมตำแหน่งในแนวนอนและค่าที่สองจะควบคุมตำแหน่งในแนวตั้ง ดังนั้นเพียงแค่ตั้งค่าแรกเป็น0pxและที่สองเป็นค่าออฟเซ็ตที่คุณต้องการดังนี้:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเงากล่องตรวจสอบสิ่งเหล่านี้:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

ฉันหวังว่านี่จะช่วยได้.

เพียงใช้พารามิเตอร์การแพร่กระจายเพื่อทำให้เงามีขนาดเล็กลง:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

การสาธิตสด: http://dabblet.com/gist/a8f8ba527f5cff607327

หากไม่เห็นเงาใด ๆ ที่ด้านข้าง (ค่าสัมบูรณ์ของ) สเปรดรัศมี (พารามิเตอร์ที่ 4) จะต้องเหมือนกับรัศมีเบลอ (พารามิเตอร์ที่ 3)

หากคุณมีสีคงที่บนพื้นหลังคุณสามารถซ่อนเอฟเฟกต์เงาด้านข้างด้วยสองเงาที่มีสีเดียวกันของพื้นหลังและเบลอ = 0 ตัวอย่าง:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

โปรดทราบว่าเงาดำต้องเป็นครั้งสุดท้ายและมีการแพร่กระจายเชิงลบ (-3px) เพื่อป้องกันไม่ให้ขยายออกไปเกินมุม

ที่นี่ซอ (เปลี่ยนสีของเงากำบังเพื่อดูว่ามันใช้งานได้จริง )

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

ฉันคิดว่านี่คือสิ่งที่คุณหลังจาก?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

ก็มักจะดีกว่าที่จะอ่านรายละเอียด ไม่มีbox-shadow-bottomคุณสมบัติและในขณะที่ Lea ชี้ให้เห็นคุณควรวางคุณสมบัติที่ไม่มีคำนำหน้าไว้ที่ด้านล่างเสมอหลังจากที่มีคำนำหน้า

ดังนั้นมันคือ:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

ลองใช้ div ที่มีซึ่งล้นไปแล้วซ่อนไว้ที่ด้านล่างและใส่ padding ที่ด้านล่าง? ดูเหมือนจะเป็นทางออกที่ง่ายที่สุด

ขออภัยที่จะบอกว่าผมไม่ได้คิดว่าตัวเองนี้ แต่เห็นว่ามันอยู่ที่อื่น

การใช้องค์ประกอบห่อองค์ประกอบรับ box-shadow และ overflow: ซ่อนอยู่บน wrapper คุณสามารถทำให้ box-shadow พิเศษหายไปและยังมีเส้นขอบที่ใช้งานได้ สิ่งนี้จะแก้ไขปัญหาที่องค์ประกอบมีขนาดเล็กลงตามที่ปรากฏเนื่องจากการแพร่กระจาย

แบบนี้:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

เนื้อหาไปที่นี่

ยังคงเป็นทางออกที่ฉลาดเมื่อต้องทำใน CSS บริสุทธิ์!

ตามที่กล่าวโดยJorgen Evens

นอกจากนี้คุณยังสามารถใช้clip-pathเพื่อตัด (ซ่อน) ขอบที่ล้นทั้งหมด แต่ที่คุณต้องการแสดง:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

ดูคลิปเส้นทาง (MDN) ข้อโต้แย้งที่จะpolygonเป็นบนซ้ายจุดที่ด้านขวาบนจุดที่มุมขวาจุดและล่างซ้ายจุด ด้วยการตั้งค่าขอบด้านล่างเป็น200%(หรือจำนวนใดก็ตามที่ใหญ่กว่า100%) คุณ จำกัด การล้นของคุณไว้ที่ขอบด้านล่างเท่านั้น

ฉันยังต้องการเงา แต่ภายใต้ภาพและตั้งค่าในซ้ายและขวาเล็กน้อย สิ่งนี้ใช้ได้กับฉัน:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

องค์ประกอบที่ใช้กับนี้คือรูปภาพขนาดกว้างหน้า (980px x 300px)

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

เงาแนวนอน, เงาแนวตั้ง, ระยะเบลอ, การแพร่กระจาย (เช่นขนาดเงา) และสี

มันเป็นการดีกว่าที่จะมองหาเงา:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

รหัสนี้กำลังใช้งานบนเว็บสแต็คโอเวอร์โฟลว์

ปากการหัสนี้ (ไม่ใช่ฉัน) แสดงให้เห็นถึงวิธีที่ง่ายที่สุดในการทำเช่นนี้และอีกด้านหนึ่งด้วยตัวเองค่อนข้างดี:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

หากพื้นหลังของคุณมั่นคง (หรือคุณสามารถทำซ้ำได้โดยใช้ CSS) คุณสามารถใช้การไล่ระดับสีเชิงเส้นด้วยวิธีนั้น:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

สิ่งนี้จะสร้างการไล่ระดับสีที่ 5px ที่ด้านล่างขององค์ประกอบตั้งแต่สีดำที่ความทึบแสง 30% ไปจนถึงโปร่งใสอย่างสมบูรณ์ ส่วนที่เหลือขององค์ประกอบมีพื้นหลังสีขาว แน่นอนว่าการเปลี่ยนสี 2 จุดสุดท้ายของการไล่ระดับสีเชิงเส้นคุณสามารถทำให้พื้นหลังโปร่งใสอย่างสมบูรณ์

คุณสามารถไล่ระดับสีที่ด้านล่างได้ - มันมีประโยชน์สำหรับฉันเพราะเงาที่ฉันต้องการอยู่ในองค์ประกอบที่กึ่งโปร่งใสอยู่แล้วดังนั้นฉันจึงไม่ต้องกังวลเกี่ยวกับการตัดภาพ:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

เพียงแค่ทำให้คุณสมบัติ "ด้านล่าง" และ "ความสูง" จับคู่และตั้งค่า rgba ของคุณเป็นสิ่งที่คุณต้องการให้อยู่ด้านบน / ล่างของเงา

คุณสามารถทำสิ่งนี้ได้:

ไวยากรณ์ทั่วไป:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

ตัวอย่าง: เราต้องการสร้างเพียงเงากล่องด้านล่างที่มีสีแดง

ดังนั้นในการทำเช่นนั้นเราต้องตั้งค่าตัวเลือกด้านทั้งหมดที่เราต้องตั้งค่าตัวเลือกเงากล่องด้านล่างและตั้งค่าตัวเลือกอื่น ๆ ทั้งหมดเป็นค่าว่างดังนี้:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

อัปเดตกับคนอื่นคำตอบที่โปร่งใสของเขาแทนสีขาวดังนั้นมันจึงทำงานบนพื้นหลังสีอื่นด้วย

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

เงาภายใน

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>