0

左側が空白であることを除いて、ボックスを次のように表示します。

.box{
    width: 190px;
    height: 90px;
    display: inline-block;
    padding: 5px;
    margin: 50px;
}

#box4sides{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 1px 1px #dbdbdb;
    -webkit-box-shadow: 0 0 1px 1px #DBDBDB;
    box-shadow: 0 0 1px 1px #DBDBDB;
    background: white;
    border: 1px solid #CDCDCC;
}

これが私の最善の試みです: http://jsfiddle.net/7dpUA/2/

3 面ボックスの他の例を見つけましたが、それらは上部または下部のいずれかが削除されていて、それを私のケースに変換できませんでした。

4

3 に答える 3

2

3 面ボックスからクラスを削除しshadow、3 面ボックスにこの少しの CSS を追加することをお勧めします。

box-shadow: 1px 1px 1px 0 #DBDBDB, 1px -1px 1px 0 #DBDBDB;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

box-shadow プロパティの説明:
box-shadow: 1 2 3 4 color;

  1. 水平オフセット - 正の値は影を右に移動し、負の値は左に移動します。
  2. 垂直オフセット - 正の値は影を下に移動し、負の値は上に移動します。
  3. Blur Ra​​dius - 値が大きいほど、ぼやけます。
  4. Spread Distance - 正の値は影を拡大し、負の値は縮小します。

色は一目瞭然です。これは、必要なものを表示するために編集された jsFiddle です。

影に関する限り、position: relative;もう必要ありません。

于 2012-09-05T20:52:08.090 に答える
0

これはあなたが探しているものですか？強調するために境界線などを誇張し、影要素の最初の引数を増やして少し右に投げ、「偽の境界線」効果を回避しました。

于 2012-09-05T20:55:15.780 に答える