一部の要素にボックスシャドウを作成する必要がありますblockが、（たとえば）その右側にのみ作成します。私のやり方は、内側の要素をbox-shadow外側の要素にラップすることです。padding-rightそのoverflow:hidden;ため、影の他の3つの側面は表示されません。
これを達成するためのより良い方法はありますか？のようにbox-shadow-right？
編集：私の意図は、影の垂直部分のみを作成することです。repeat-yルールの内容とまったく同じbackground:url(shadow.png) 100% 0% repeat-yです。
はい、box-shadowルールのshadowspreadプロパティを使用できます。
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}<div class="myDiv"></div>4番目のプロパティ-2pxは影の広がりです。これを使用して影の広がりを変更し、影が片側だけにあるように見せることができます。
これはまた、シャドウポジショニングルールを使用して、シャドウを10px右に送信し（水平オフセット）0px、要素の下に保持します（垂直オフセット）。
5pxぼかし半径です:)
clip-path現在（2020）は、要素の特定の側面でボックスシャドウを実現する最も簡単な方法の1つです。特に、必要な効果が特定のエッジでの「クリーンカット」シャドウ（OPが最初に探していたものであると私は信じています）である場合は、次のようになります。これ：
.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}<div class="shadow-element"></div>...このような減衰/縮小/薄くなるシャドウとは対照的に：
.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}<div class="shadow-element"></div>問題の要素に次のCSSを適用するだけです。
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
どこ：
Apx上端の影の可視性を設定しますBpx右Cpx下Dpx左シャドウを非表示にする必要があるエッジには値0を入力し、シャドウを表示する必要があるエッジには負の値（ボックスシャドウブラー半径と同じ- Xpx）を入力します。
編集が簡単な私の自作のソリューション：
HTML：
<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>
css：
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
height:100px;
width:100px;
background: red;
}
#anti-shadow-div{
margin:20px;
display:table;
overflow:hidden;
}
デモ： http：
//jsfiddle.net/jDyQt/103
最大2つの側面でクリップ効果を得るには、背景のグラデーションを持つ疑似要素を使用できます。
header::before, main::before, footer::before, header::after, main::after, footer::after {
display: block;
content: '';
position: absolute;
width: 8px;
height: 100%;
top: 0px;
}
header::before, main::before, footer::before {
left: -8px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
header::after, main::after, footer::after {
right: -8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
通常はドキュメントを構成する要素の左右に、影のような効果を追加します。
::afterまたは::before疑似要素を使用してシャドウを追加するだけです。1pxにして、好きな側に配置します。以下はトップの例です。
footer {
margin-top: 50px;
color: #fff;
background-color: #009eff;
text-align: center;
line-height: 90px;
position: relative;
}
footer::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
top: 0;
left: 0;
z-index: -1;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}<footer>top only box shadow</footer>これが私の例です：
.box{
width: 400px;
height: 80px;
background-color: #C9C;
text-align: center;
font: 20px normal Arial, Helvetica, sans-serif;
color: #fff;
padding: 100px 0 0 0;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}<div class="box">
</div>これが私がしたちょっとしたハックです。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
1.片側のボックスシャドウを作成する要素のすぐ下に作成します（この場合、下から来るよう<div class="one_side_shadow"></div>に片側のはめ込みシャドウが必要です）id="element"
2.次に、負の垂直オフセットを使用してレギュラーを作成しbox-shadow、シャドウを上向きに片側にプッシュしました。
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
これは、それぞれの側でデモンストレーションするコードペン、または実用的なスニペットです。
.boxes {
display: flex;
flex-wrap: wrap;
}
.box {
margin: 20px;
border: 1px solid #ccc;
font-family: Helvetica Neue, Arial, sans-serif;
font-weight: 100;
letter-spacing: 2px;
color: #999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
padding: 40px;
line-height: 1.4em;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}<div class="boxes">
<div class="box top">Top Only</div>
<div class="box right">Right Only</div>
<div class="box bottom">Bottom Only</div>
<div class="box left">Left Only</div>
</div>これは簡単な方法かもしれません
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
これを任意のdivに割り当てます
このサイトは私を助けてくれました：https ：//gist.github.com/ocean90/1268328 （このサイトでは、この投稿の日付の時点で左右が逆になっていることに注意してください...しかし、期待どおりに機能します）。これらは、以下のコードで修正されています。
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>
</body>
</html>
div {
border: 1px solid #666;
width: 50px;
height: 50px;
-webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
私がやっていることは、影の垂直ブロックを作成し、それをブロック要素があるべき場所の隣に配置することです。次に、2つのブロックが別のブロックにラップされます。
<div id="wrapper">
<div id="shadow"></div>
<div id="content">CONTENT</div>
</div>
<style>
div#wrapper {
width:200px;
height:258px;
}
div#wrapper > div#shadow {
display:inline-block;
width:1px;
height:100%;
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}
div#wrapper > div#content {
display:inline-block;
height:100%;
vertical-align:top;
}
</style>
ここにjsFiddleの例があります。
わかりました、これがもう1つの試みです。疑似要素を使用し、それらの上にシャドウボックスのポーパティを適用します。
html：
<div class="no-relevant-box">
<div class="div-to-shadow-1"></div>
<div class="div-to-shadow-2"></div>
</div>
sass：
.div-to-shadow-1, .div-to-shadow-2
height: 150px
width: 150px
overflow: hidden
transition: all 0.3s ease-in-out
&::after
display: block
content: ''
position: relative
top: 0
left: 100%
height: 100%
width: 10px
border: 1px solid mediumeagreen
box-shadow: 0px 7px 12px rgba(0,0,0,0.3)
&:hover
border: 1px solid dodgerblue
overflow: visible