CSS3 box-shadow：insetは片面または両面しか実行できませんか？ボーダートップのように？

Question 1

css3でのサイド固有の内部シャドウのサポートについて疑問に思っています。

私はこれがサポートされているブラウザでうまく機能することを知っています。

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

私は次のようなことを達成する方法があるかどうかについて興味があります：

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

Question 2

これは私のために働いたものです：

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

例：http：//jsfiddle.net/23Egu/

Question 3

0にbox-shadow-top設定offsetxすると、本当に必要だとは思いません。offsety、任意の正の値に、残りのシャドウのみが上に表示。

上に影を、下に影を付けたい場合は、2つのdivを使用するだけです。

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

Question 4

この例のように、親ボックスで通常のシャドウがカットされた要素を使用: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: "\0020";
  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>

Question 5

ほとんどの場合、回避策として背景グラデーションを使用できます。

SCSS（コンパス付き）の例：

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

Question 6

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

Question 7

同じ影の場合ですが、上部のみです：

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

一方向に影を付けるには、「blur」パラメータを「spread」パラメータで無効にしてから、「h-pos」および/または「v-pos」パラメータをこの同じ値で調整する必要があります。反対側の境界線または三重の境界線では機能しません。もう1つの定義を追加する必要があります。

その他の例：http：//codepen.io/GBMan/pen/rVXgqP

Question 8

いいえ、直接ではありませんが、次のようにdivに入れることで、不要な部分を切り取ることができますoverflow: hidden。

http://jsfiddle.net/Vehdg/

Question 9

私は自分でこの問題を抱えていました。私が見つけた解決策は、複数のボックスシャドウ（シャドウが必要な側ごとに1つ）を使用することでした。定義は次のとおりです。

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

これがそれを考える方法です：

まず、スプレッドを0にします（これにより、すべての側で効果が無効になります）
hオフセット（正に設定すると左側にキャストされ、負に設定すると右側にキャストされます）
vオフセット（正に設定した場合は上側に、負に設定した場合は下側にキャストされます）

ここでは、3つの側面にボックスシャドウがある私のケースを見ることができます（左、上、右、下は背景と同じ色で、私が望む効果を作成します-左側と右側は一番下まで行きます） https://codepen.io/cponofrei/pen/eMMyQX

Question 10

divをに設定しoverflow:hidden、境界線に沿ってシャドウ要素を追加することで、片側の内側のシャドウを実現できます。

分割の上部と下部の境界に内側の影を設定します。

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</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);
}

Question 11

box-shadow4つの側面すべてに対応しています。あなたはそれを変えることはできません（まだ？）。4つのサイズのbox-shadow定義がありOffsetX、offsetY、BlurとSpread。

Question 12

複数のボックスシャドウが私のためにトリックをしました。

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/