Как я могу добавить поле-тень на одной стороне элемента?

мне нужно создать окно-тень на некоторых block элемент, но только (например) на его правой стороне. Как я это делаю, чтобы обернуть внутренний элемент с box-shadow во внешнюю с padding-right и overflow:hidden; таким образом, три другие стороны тени не видны.

есть ли лучший способ достичь этого? Как box-shadow-right?

EDIT: мои намерения создать только вертикальная часть тени. Точно так же, как и то, что repeat-y правила background:url(shadow.png) 100% 0% repeat-y будет делать.

10 380
css css3 shadow-dom box-shadow

10 ответов:

Да, вы можете использовать свойство shadow spread правила 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>

четвертое свойство там -2px это распространение тени, вы можете использовать его, чтобы изменить распространение тени, делая вид, что тень находится только на одной стороне.

это также использует правила позиционирования тени 10px отправляет его вправо (горизонтальное смещение) и 0px держит его под элементом (вертикальное смещение.)

5px - радиус размытия :)

например тут.

496

мое самодельное решение, которое легко редактировать:

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

демо:
http://jsfiddle.net/jDyQt/103

24

чтобы получить эффект обрезки до двух сторон, вы можете использовать псевдо-элементы с градиентами фона.

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

добавит хороший теневой эффект слева и справа от элементов, которые обычно составляют документ.

14

просто использовать ::after или ::перед псевдо-элемент, чтобы добавить тень. Сделайте его 1px и расположите его на любой стороне вы хотите. Ниже приведен пример сверху.

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

вот небольшой хак, который я сделал.

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

1. создать <div class="one_side_shadow"></div> прямо под элементом, который я хочу создать одностороннюю тень коробки (в этом случае я хочу одностороннюю тень вставки для id="element" снизу)

2. тогда я создал обычный box-shadow отрицательное вертикальное смещение, чтобы подтолкнуть тень вверх в одну сторону. 

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

Это может быть простой способ

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

назначьте это любому div

2

вот мой пример:

.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

этот сайт мне помог:https://gist.github.com/ocean90/1268328 (Обратите внимание, что на этом сайте левая и правая стороны перевернуты на дату этого сообщения... но они работают, как ожидалось). они исправлены в коде ниже.

<!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
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
0

Я создаю вертикальный блок для тени и помещаю его рядом с тем местом, где должен быть мой элемент блока. Два блока затем завернуты в другой блок:

<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 здесь.

0