私はbox-shadow
4つの側面すべてにを適用しようとしています。私はそれを2つの側面でしか得ることができませんでした:
回答:
これは、xとyのオフセットが原因です。これを試して:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
編集(1年後..):コメントで要求されているように、回答をよりクロスブラウザにしました:)
ところで:最近は多くのcss3ジェネレーターがあります ..css3.me、css3maker、css3generatorなど..
参照: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;
}
これはかっこいいですね。
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
最も簡単な解決策と最も簡単な方法は、4つの側面すべてに影を追加することです。CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
ボックスシャドウの構文を理解し、それに応じて記述します
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);
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);
}
- 同じ色の各面
: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>
- それぞれの面が異なる色
: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>
このcssコードを4つの側面すべてに使用します。box-shadow:0px 1px 7px 0px rgb(106、111、109);
次のリンクでさまざまな組み合わせを行うことができます。
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);