4つの側面すべてにボックスシャドウを適用するにはどうすればよいですか?


84

私はbox-shadow4つの側面すべてにを適用しようとしています。私はそれを2つの側面でしか得ることができませんでした:


2
CSS3please.comは、この種のものに常に役立ちます...
sscirrus 2011

回答:


144

これは、xとyのオフセットが原因です。これを試して:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

編集(1年後..):コメントで要求されているように、回答をよりクロスブラウザにしました:)

ところで:最近は多くのcss3ジェネレーターがあります ..css3.mecss3makercss3generatorなど..


1
半径が小さく、スプレッド値が小さいほど見栄えが良くなりますが、正しい答えが早く得られるため、+ 1します。
30dot 2011

1
ありがとう。私はあなたの最初の答えを見て、私は質問を間違えたと思いました:)
Damb 2011

あなたはあなたの答えをもっとクロスブラウザにするべきです。
ルーカス

理由はわかりませんが、これではうまくいきません。これを使用してもボックスシャドウは表示されません。@thirtydotによって投稿された回答を使用すると、機能します。最初の2つの値が0の場合は、ぼかしと広がりが必要です。これはChromeで発生しています。
チャールズウィリアムズ

1
@ thirtydot-そうです、背景が明るいので、それを見ることができます。しかし、あなたの背景が黒い場合、あなたはそれをまったく見ることができません。だから私はそれがうまくいかないと言うべきではないと思います。ただし、ボックスシャドウの色に関係なく、背景が黒の場合は、スプレッドがないと確実に表示されません。赤でも境界線はわずかに赤く見えますが、「目に見える」ボックスの影はありません。したがって、背景が明るい場合は、このソリューションが機能すると思います。非常に暗い背景の場合、このソリューションは信頼できません。jsfiddle.net/vkzd71rc vs jsfiddle.net/vkzd71rc/1
チャールズウィリアムズ

35

参照:http//jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

3つの値+色のボックスシャドウの各値が何であるかを知っています。この4つの値は何の略ですか?
トンボ

1
読む:developer.mozilla.org/En/CSS/Box-shadow-具体的には、これは「拡散半径」です。
30dot 2011

フィドルクリエーター-MVP。
Terrance00 2015


10

このコードのように単純です:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

5

最も簡単な解決策と最も簡単な方法は、4つの側面すべてに影を追加することです。CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

5

ボックスシャドウの構文を理解し、それに応じて記述します

box-shadow: h-offset v-offset blur spread color;

h-offset:影の水平オフセット。正の値はボックスの右側に影を置き、負の値はボックスの左側に影を置きます-必須

v-offset:影の垂直オフセット。正の値は影をボックスの下に置き、負の値は影をボックスの上に置きます-必須

ぼかし:ぼかし半径(数値が大きいほど、影がぼやけます)-オプション

color:影の色-オプション

スプレッド:スプレッド半径。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします-オプション

挿入図:影を外側の影から内側の影に変更します-オプション

box-shadow: 0 0 10px #999;

ボックスシャドウはスプレッドでうまく機能します

box-shadow: 0 0 10px 8px #999;

'inset'を使用して、ボックス内に影を適用します

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

rgba(赤、緑、青のアルファ)を​​使用して、シャドウをより効率的に調整します

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8); 

2

http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/サイトを見つけました。

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

1
このサイトの他の回答と同様に適切ですが、あなたが努力しているので、私はあなたの回答に投票します。
ブルーレイ2014

1

CSS3ボックスシャドウ:4つの側面の対称性

  1. 同じ色の各面

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>

  1. それぞれの面が異なる色

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>

スクリーンショット

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html


0

このcssコードを4つの側面すべてに使用します。box-shadow:0px 1px 7px 0px rgb(106、111、109);


0

次のリンクでさまざまな組み合わせを行うことができます。
https://www.cssmatic.com/box-shadow

あなたが必要とする結果は次のCSSによって達成することができます

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.