Jak dodać cień po jednej stronie elementu?

Muszę utworzyć box-shadow na jakimś elemencie block, ale tylko (na przykład) po jego prawej stronie. Sposób, w jaki to robię, polega na owinięciu wewnętrznego elementu box-shadow w zewnętrzny z padding-right i overflow:hidden;, aby pozostałe trzy strony cienia nie były widoczne.

Czy jest jakiś lepszy sposób, aby to osiągnąć? Jak box-shadow-right?

EDIT : moim zamiarem jest stworzenie tylko pionowej części cienia. Dokładnie to samo co repeat-y reguły background:url(shadow.png) 100% 0% repeat-y.

Author: TylerH, 2011-02-25
Source

10 answers

Tak, możesz użyć właściwości Shadow spread reguły box-shadow: 

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: 10px 0 5px -2px #888;
          box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>

Czwarta właściwość -2px to rozprzestrzenianie cienia, możesz go użyć do zmiany rozprzestrzeniania cienia, sprawiając, że wydaje się, że Cień jest tylko po jednej stronie.

Używa również reguł pozycjonowania cienia 10px wysyła go w prawo (Przesunięcie poziome) i 0px utrzymuje go pod elementem (Przesunięcie pionowe.)

5px jest promieniem rozmycia :)

Przykład dla Ciebie tutaj .

 496
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 13:08:31

Moje własne rozwiązanie, które jest łatwe do edycji:

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

Demo:
http://jsfiddle.net/jDyQt/103

 24
Author: Puyol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-08 10:02:00

Aby uzyskać efekt przycięcia na maksymalnie dwóch stronach, możesz użyć pseudo elementów z gradientami tła.

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

Doda ładny efekt cienia po lewej i prawej stronie elementów, które normalnie tworzą dokument.

 14
Author: Jacek Kuzemczak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-14 13:03:48

Wystarczy użyć pseudo elementu:: after lub:: before, aby dodać cień. Ustaw 1px i ustaw na dowolnej stronie. Poniżej przykład top.

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>
 6
Author: shwnrgr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 22:35:43

Oto mały hack, który zrobiłem.

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

1. Utwórz <div class="one_side_shadow"></div> tuż pod elementem, który chcę utworzyć jednostronny Cień pudełka (w tym przypadku chcę jednostronny Cień wkładki dla id="element" wychodzący od dołu)

2. potem stworzyłem zwykły box-shadow używając ujemnego przesunięcia pionowego, aby popchnąć cień w górę na jedną stronę. 

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
 4
Author: atiquratik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-22 07:09:34

To może być prosty sposób 

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

Przypisz to do dowolnego div

 2
Author: madhairsilence,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-16 15:26:28

Oto mój przykład: 

.box{
        
        width: 400px; 
        height: 130px; 
        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>
 1
Author: Webpixstudio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-07 20:00:01

Ta strona mi pomogła: https://gist.github.com/ocean90/1268328 (zauważ, że na tej stronie lewa i prawa są odwrócone od daty tego postu... ale działają zgodnie z oczekiwaniami). zostały one poprawione w poniższym kodzie.

<!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>
 0
Author: ter24,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-22 01:44:32 
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
 0
Author: Ashisha Nautiyal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-10 05:45:19

To, co robię, to tworzenie pionowego bloku dla cienia i umieszczanie go obok mojego elementu blokowego. Dwa bloki są następnie owinięte w inny blok: 

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

Jsfiddle przykład tutaj .

 0
Author: jim_kastrin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-11 12:50:09