Soru Sadece kutu içi Inset alt ile ilgili bir sorun var


İç gölge oluşturmak için kutu gölgesi kullanıyorum ...

box-shadow: inset 0 0 10px #000000;
-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;

... ama iç gölgenin sadece alttan gelmesini isterdim. Bu işi yapmaya çalışmanın birkaç yolunu denedim ama yapamadım ... Bunu kutu gölge ile nasıl yapardım?


44
2017-08-22 21:40


Menşei


Buna ne dersin inset 0px -10px 6px #555555;? - Majid Laissi
Gerçekten benim için çalışmadı. ACJ çivilenmiş - Joe


Cevaplar:


Yayılma mesafesini tanımlayan dördüncü uzunluk için negatif bir değer kullanın. Bu genellikle göz ardı edilir, ancak tüm önemli tarayıcılar tarafından desteklenir. Bunu gör Keman sonuç için.

div{
    background:red;
    height:100px;
    width:200px;
    -moz-box-shadow: inset 0 -10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
    box-shadow: inset 0 -10px 10px -10px #000000;
}
<!doctype html>
<div></div>


105
2017-08-22 22:01



ahhh teşekkür ederim :) - Joe
Rica ederim. Burada belgelenmiştir (bir uzatmaya): CSS Arka Planları ve Kenarlıklar Modülü Seviye 3. - ACJ
Kesinlikle bilmek güzel! - Joe
box-shadow sonra olmalı -webkti-box-shadow ve -moz-box-shadow - Shlomi Hassid
Anlaşılan, @ShlomiHassid. Her iki parçacığı da bunu yansıtacak şekilde düzenledim. - ACJ


JSnippet DEMO

Sadece üstte:

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

Sadece altta:

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

Sadece üst ve altta:

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

Hızlı örnek

.shadow-top {
    -moz-box-shadow:    inset  0  10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey;
}
.shadow-bottom {
    -moz-box-shadow:    inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0 -10px 10px -10px grey;
}
.shadow-top-bottom {
    -moz-box-shadow:    inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
}

div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }
<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>


11
2018-05-25 18:24