Может ли CSS3 box-shadow: inset делать только одну или две стороны? как бордер-топ?

мне интересно о поддержке боковых конкретных внутренних теней в css3.

Я знаю, что это отлично работает на поддерживаемых браузерах.

div { box-shadow:inset 0px 1px 5px black; }

мне просто любопытно, есть ли способ достичь чего-то вроде: 

div { box-shadow-top:inset 0px 1px 5px black; }
11 72
css css3

11 ответов:

Это то, что сработало для меня:

box-shadow: inset 1px 4px 9px -6px;

Пример:http://jsfiddle.net/23Egu/

135

Я не думаю, что вам действительно нужно box-shadow-top потому что если вы устанавливаете offsetx 0, а offsety для любого положительного значения только оставшаяся тень находится сверху.

если вы хотите иметь тень сверху и тень внизу, вы можете просто использовать два дива:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

если вы хотите избавиться от тени по бокам используйте rgba вместо hex цвет и установить больше offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

таким образом, вы даете тени больше непрозрачности, поэтому стороны остаются скрытыми и с большим количеством смещение вы получаете меньше непрозрачности

полный пример:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
11

используя :before и after элементы с регулярными тенями вырезать по overflow:hidden на родительском поле, как в этом примере:http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "20";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>
9

вы можете использовать градиент фона для работы вокруг в большинстве случаев:

SCSS (с компасом) пример:

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
5
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

это работает просто прелесть :)

вот кодовый элемент, иллюстрирующий это: http://codepen.io/poopsplat/pen/cGBLy

4

для той же тени, но только сверху:

box-shadow: inset 0px 6px 5px -5px black;

чтобы иметь тень в одном направлении, вы должны отрицать параметр "размытие" с параметром "распространение", а затем настроить параметры "h-pos" и/или "v-pos" на это же значение. Он не работает с противоположной границей или тройной границей. Вы должны добавить еще одно определение.

больше примеров здесь:http://codepen.io/GBMan/pen/rVXgqP

3

нет, не напрямую, но вы можете обрезать части, которые вы не хотите, поместив его в div с overflow: hidden:

http://jsfiddle.net/Vehdg/

1

У меня просто была эта проблема сама. Решение, которое я нашел, было с несколькими тенями коробки (по одному для каждой стороны, которую вы хотите, чтобы ваша тень). Вот определение: 

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

вот как об этом думать:

  • во-первых, сделайте спред 0 (это отключит эффект со всех сторон)
  • H-смещение (если вы установите его положительным, он будет бросать на левой стороне, если вы установите его отрицательным, на правой стороне)
  • смещение v (Если вы установите его в будьте положительны, он будет бросать на верхней стороне, если вы установите его отрицательным, на нижней стороне

здесь вы можете увидеть мой случай с коробкой-тенью с трех сторон (слева, сверху, справа и внизу с тем же цветом, что и фон, чтобы создать эффект, который я хотел - левая сторона и право идут до самого дна) https://codepen.io/cponofrei/pen/eMMyQX

1

вы можете выполнить одностороннюю, внутреннюю тень, установив div в overflow:hidden и добавим тень вдоль границ элементов.

установить внутреннюю тень на верхней и нижней границах раздела:

HTML 

&ltdiv id="innerShadow">
    &ltdiv id="innerShadowTop">
        Content...
    &ltdiv id="innerShadowBottom">
&lt/div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
0

box-shadow для всех четырех сторон. Вы не можете изменить это (пока?). 4 размера в box-shadow определение OffsetX,offsetY,Blur и Spread.

0

несколько теней коробки сделали трюк для меня.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

0