css3を使用してドロップシャドウを中央に配置できますか？

私はボーダーを中心とするドロップシャドウを作成しようとしていますが、画像を背景として使用したくはありませんが、最初のアプローチは何か分かりません。css3を使用してドロップシャドウを中央に配置できますか？

コードを書くことを要求していませんが、誰かがこれを達成する方法を考えている場合は、本当に素晴らしいでしょう。

参考のために画像を添付していますが、最初の中央に気がついたら小さな影があります。

出典

2016-06-28 Sanjeev Kumar

あなたが試してみました：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp – hakJav

をはい、私は非常にそれについて知っていますが、私の質問が違う、私はボックスの真下にあるボトムセンターの影を探しています。 –

水平シャドウを0に設定し、垂直方向を好きなように編集できます。例：https://jsfiddle.net/9mqxdnLv/1/ – hakJav

あなたは、参照影は本当にはるかにされていることを擬似要素

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    background: white; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 20px; 
 
    top: 80px; 
 
    left:0; 
 
    position: absolute; 
 
    box-shadow: 0px 10px 5px #888888; 
 
    z-index: -1; 
 
}

<div></div>

出典

2016-06-28 17:37:28 LGSon

すばらしい、ありがとう！ @LGSon私はそれが動作すると思います。今試してみましょう。 –

それはそれを行うのは非常に巧妙な方法です+1。 – Stickers

@ Pangloss非常にありがとう:) – LGSon

を使用することができます。密接に見ると、本当にカレンダーのページが反転し、グラデーションが付いています。変換やオーバーレイを使ってそれを行う方法（Appleスタイル）のヒントがたくさんあるはずです。

もっと簡単に言うと、hakJavのコメントとフィドルが正しいです。私はそれが少しきれいですjsFiddle

https://jsfiddle.net/5r7vqddt/8/

を変更しました。最終的に、勾配フェード

border-image: 
    linear-gradient(to bottom, black, rgb(your container bgColor here)) 20;

が移動するための方法となります取得します。私はその同じフィドルに1つを含めました。私はそれを行うより良い方法があると確信しています。ここでは、CSS-トリックは、ウィットいくつかの興味深い例をリンクされています css-tricks border gradient examples

出典

2016-06-29 23:03:19 Mark

あなたの入力のための@マークは、リンクは学ぶためにたくさんの良いコレクションを持っています。 –

css3を使用してドロップシャドウを中央に配置できますか？

答えて

関連する問題