Bagaimana saya bisa menambahkan bayangan kotak di satu sisi elemen?

Saya perlu membuat bayangan kotak pada beberapa blockelemen, tetapi hanya (misalnya) di sisi kanannya. Cara saya melakukannya adalah dengan membungkus elemen dalam dengan box-shadowyang luar dengan padding-rightdan overflow:hidden;sehingga tiga sisi lain dari bayangan tidak terlihat.

Apakah ada cara yang lebih baik untuk mencapai ini? Suka box-shadow-right?

EDIT : Maksud saya adalah membuat hanya bagian vertikal dari bayangan. Persis sama dengan apa repeat-yyang background:url(shadow.png) 100% 0% repeat-yakan dilakukan aturan .

Ya, Anda bisa menggunakan properti penyebaran bayangan aturan kotak-bayangan:

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

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

Properti keempat ada -2pxpenyebaran bayangan, Anda dapat menggunakannya untuk mengubah penyebaran bayangan, membuatnya tampak bahwa bayangan itu ada di satu sisi saja.

Ini juga menggunakan aturan penentuan posisi bayangan 10pxmengirimkannya ke kanan (offset horizontal) dan 0pxmenyimpannya di bawah elemen (offset vertikal.)

5px adalah radius blur :)

Contoh untuk Anda di sini .

Solusi buatan saya yang mudah diedit:

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

Untuk mendapatkan efek terpotong hingga dua sisi Anda dapat menggunakan elemen pseudo dengan gradien latar belakang.

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

akan menambahkan efek seperti bayangan di sebelah kiri dan kanan elemen yang biasanya membentuk dokumen.

Cukup gunakan :: after atau :: before elemen pseudo untuk menambahkan bayangan. Buat 1px dan posisikan di sisi mana pun yang Anda inginkan. Di bawah ini adalah contoh dari atas.

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>

Ini contoh saya:

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

Ini sedikit hack yang saya lakukan.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Buat <div class="one_side_shadow"></div>tepat di bawah elemen yang ingin saya buat bayangan kotak satu sisi (dalam hal ini saya ingin bayangan sisipan satu sisi untuk id="element"datang dari bawah)

2. Kemudian saya membuat reguler box-shadowmenggunakan offset vertikal negatif untuk mendorong bayangan ke atas ke satu sisi.

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

Ini bisa menjadi cara yang sederhana

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

Tetapkan ini untuk div apa saja

Berikut adalah codepen yang diperagakan untuk setiap sisi, atau cuplikan yang berfungsi:

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

Situs ini membantu saya: https://gist.github.com/ocean90/1268328 (Perhatikan bahwa di situs itu kiri dan kanan dibalik pada tanggal posting ini ... tetapi mereka berfungsi seperti yang diharapkan). Mereka dikoreksi dalam kode di bawah ini.

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

Apa yang saya lakukan adalah membuat blok vertikal untuk bayangan, dan letakkan di sebelah tempat elemen blok saya seharusnya. Kedua blok tersebut kemudian dibungkus menjadi blok lain:

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

Contoh jsFiddle di sini .

Oke, ini dia satu kali coba lagi. Menggunakan elemen pseudo dan menerapkan porperty shadow-box di atasnya.

html:

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

kelancangan:

.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