Bir öğenin bir tarafına nasıl bir kutu gölgesi ekleyebilirim?

Bazı blocköğelerde bir kutu gölgesi oluşturmam gerekiyor , ancak yalnızca (örneğin) sağ tarafında. Bunu yapmanın yolu, iç elemanı box-shadowbir dış elemanla sarmaktır padding-rightve overflow:hidden;böylece gölgenin diğer üç tarafı görünmez.

Bunu başarmanın daha iyi bir yolu var mı? Gibi box-shadow-rightmi?

DÜZENLEME : Niyetlerim gölgenin sadece dikey kısmını oluşturmak . repeat-yKuralın background:url(shadow.png) 100% 0% repeat-yne yapacağıyla tam olarak aynı .

Evet, box-shadow kuralının shadow spread özelliğini kullanabilirsiniz:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

Dördüncü özellik orada -2pxgölge yayılımıdır, gölgenin yayılmasını değiştirmek için kullanabilirsiniz, böylece gölgenin sadece bir tarafta olduğu görülür.

Bu ayrıca gölge konumlandırma kurallarını 10pxkullanarak sağa gönderir (yatay ofset) ve0px öğenin altında tutar (dikey ofset.)

5px bulanıklık yarıçapı :)

Burada size örnek .

Düzenlemesi kolay olan kendi çözümüm:

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;
}​

Demo:
http://jsfiddle.net/jDyQt/103

İki tarafa kırpılmış efekti elde etmek için, arka plan degradeleri olan sözde öğeleri kullanabilirsiniz.

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));
}

normalde bir belgeyi oluşturan öğelerin soluna ve sağına hoş bir gölge benzeri efekt ekler.

Gölgeyi eklemek için :: after veya :: before pseudo elementini kullanın. 1px yapın ve istediğiniz tarafa yerleştirin. Aşağıda top örneği verilmiştir.

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>

İşte benim örnek:

.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>

İşte yaptığım küçük bir kesmek.

<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> Tek taraflı kutu gölgesi oluşturmak istediğim öğenin altında bir sağ oluşturun (bu durumda id="element", alttan gelen tek taraflı bir iç gölge istiyorum )

2. Sonra box-shadowgölgeyi bir tarafa doğru itmek için negatif bir dikey ofset kullanarak normal bir düzen oluşturdum .

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Bu basit bir yol olabilir

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Bunu herhangi bir div'e atayın

Her bir taraf için gösterilecek bir kod penceresi veya çalışan bir snippet:

.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>

Bu site bana yardımcı oldu: https://gist.github.com/ocean90/1268328 ( Bu sitede sol ve sağın bu yayının tarihi itibariyle tersine çevrildiğini unutmayın ... ancak beklendiği gibi çalışırlar). Aşağıdaki kodda düzeltilmiştir.

<!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 ;
}

Yaptığım şey gölge için dikey bir blok oluşturmak ve bunu blok öğemin olması gereken yere yerleştirmektir. İki blok daha sonra başka bir bloğa sarılır:

<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 örneği burada .

Tamam, işte bir deneme daha. Sözde elemanlar kullanmak ve gölge kutu porperty'yi üzerlerine uygulamak.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

küstahlık:

.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

https://codepen.io/alex3o0/pen/PrMyNQ

clip-pathşimdi (2020), özellikle gerekli etki belirli kenarlarda "temiz kesim" gölgesi olduğunda (OP'nin başlangıçta aradığı şey olduğuna inanıyorum), öğelerin belirli taraflarında kutu gölgeleri elde etmenin en basit yollarından biridir. bu:

.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>

... bu gibi zayıflatılmış / azaltılmış / inceltilmiş bir gölgenin aksine:

.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>

Söz konusu öğeye aşağıdaki CSS'yi uygulamanız yeterlidir:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Nerede:

• Apx üst kenar için gölge görünürlüğünü ayarlar
• Bpx sağ
• Cpx alt
• Dpx ayrıldı

Gölgenin gizlenmesi gereken kenarlar için 0 değerini ve gölgenin görüntülenmesi gereken kenarlara negatif bir değer (kutu-gölge bulanıklık yarıçapıyla aynı - Xpx) girin.