Làm cách nào tôi có thể thêm bóng hộp ở một bên của một phần tử?

Tôi cần tạo bóng hình hộp trên một số blockphần tử, nhưng chỉ (ví dụ) ở bên phải của nó. Cách tôi làm là bọc phần tử bên trong box-shadowvào bên ngoài padding-rightvà overflow:hidden;vì vậy không thể nhìn thấy ba mặt khác của bóng.

Có cách nào tốt hơn để đạt được điều này? Giống như box-shadow-right?

EDIT : Ý định của tôi là chỉ tạo ra phần dọc của bóng tối. Chính xác giống như những gì repeat-ycủa quy tắc background:url(shadow.png) 100% 0% repeat-ysẽ làm.

Có, bạn có thể sử dụng thuộc tính trải bóng của quy tắc bóng hộp:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

Thuộc tính thứ tư có -2pxbóng lan rộng, bạn có thể sử dụng nó để thay đổi độ lan rộng của bóng, làm cho nó xuất hiện rằng bóng chỉ ở một bên.

Điều này cũng sử dụng các quy tắc định vị bóng 10pxgửi nó sang bên phải (bù ngang) và 0pxgiữ nó dưới phần tử (bù dọc.)

5px là bán kính mờ :)

Ví dụ cho bạn ở đây .

Giải pháp tự tạo của tôi rất dễ chỉnh sửa:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Bản trình diễn:
http://jsfiddle.net/jDyQt/103

Để có được hiệu ứng cắt xén ở hai bên, bạn có thể sử dụng các phần tử giả với độ dốc nền.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

sẽ thêm một hiệu ứng giống như bóng tối ở bên trái và bên phải của các yếu tố thường tạo thành một tài liệu.

Chỉ cần sử dụng :: after hoặc :: trước phần tử giả để thêm bóng. Làm cho nó 1px và đặt nó vào bất cứ phía nào bạn muốn. Dưới đây là ví dụ về đầu trang.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Đây là ví dụ của tôi:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Đây là một hack nhỏ mà tôi đã làm.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Tạo một <div class="one_side_shadow"></div>quyền bên dưới phần tử mà tôi muốn tạo bóng hộp một phía (trong trường hợp này tôi muốn một bóng trong một phía để id="element"đến từ phía dưới)

2. Sau đó, tôi tạo một thông thường box-shadowbằng cách sử dụng bù dọc âm để đẩy bóng lên trên một phía.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Đây có thể là một cách đơn giản

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Gán điều này cho bất kỳ div

Đây là một codepen để chứng minh cho mỗi bên hoặc một đoạn làm việc:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Trang web này đã giúp tôi: https://gist.github.com/ocean90/1268328 (Lưu ý rằng trên trang web đó, bên trái và bên phải được đảo ngược kể từ ngày của bài đăng này ... nhưng chúng hoạt động như mong đợi). Chúng được sửa trong mã dưới đây.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Những gì tôi làm là tạo một khối dọc cho bóng và đặt nó bên cạnh vị trí của phần tử khối của tôi. Hai khối sau đó được bọc thành một khối khác:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

ví dụ jsFiddle ở đây .

Ok, đây là một thử thêm. Sử dụng các yếu tố giả và xin lỗi hộp bóng tối trên chúng.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

sass:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ