Czy CSS3 box-shadow: inset może mieć tylko jedną lub dwie strony? jak border-top?

Question 1

Zastanawiam się nad obsługą wewnętrznych cieni specyficznych dla bocznych stron w css3.

Wiem, że to działa świetnie w obsługiwanych przeglądarkach.

div { box-shadow:inset 0px 1px 5px black; }

Ciekawi mnie tylko, czy jest sposób na osiągnięcie czegoś takiego:

div { box-shadow-top:inset 0px 1px 5px black; }

Question 2

Oto, co zadziałało dla mnie:

box-shadow: inset 1px 4px 9px -6px;

Przykład: http://jsfiddle.net/23Egu/

Question 3

Nie sądzę, że naprawdę potrzebujesz, box-shadow-topponieważ jeśli ustawisz offsetx0 i offsetyjakąkolwiek wartość dodatnią, tylko pozostały cień jest na górze.

jeśli chcesz mieć cień na górze i cień na dole, możesz po prostu użyć dwóch elementów div:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

jeśli chcesz pozbyć się cienia po bokach użyj rgbazamiast hexkoloru i ustaw większy offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

w ten sposób nadasz cieniu więcej krycia, aby boki pozostały ukryte, a przy większym przesunięciu uzyskasz mniej krycia

pełny przykład:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>

Question 4

używanie elementów :beforei afterz regularnymi wycinanymi cieniami overflow:hiddenw polu nadrzędnym, jak w tym przykładzie: http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>

Question 5

W większości przypadków możesz użyć gradientu tła do obejścia:

Przykład SCSS (z kompasem):

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

Question 6

box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

To działa po prostu cudownie :)

Oto codepen ilustrujący to: http://codepen.io/poopsplat/pen/cGBLy

Question 7

Dla tego samego cienia, ale tylko na górze:

box-shadow: inset 0px 6px 5px -5px black;

Aby cień był skierowany w jednym kierunku, należy zanegować parametr „rozmycie” za pomocą parametru „rozprzestrzenianie”, a następnie dostosować parametry „h-pos” i / lub „v-pos” o tę samą wartość. Nie działa z przeciwną lub potrójną ramką. Musisz dodać jeszcze jedną definicję.

Więcej przykładów tutaj: http://codepen.io/GBMan/pen/rVXgqP

Question 8

Nie, nie bezpośrednio, ale możesz wyciąć części, których nie chcesz, umieszczając je w div z overflow: hidden:

http://jsfiddle.net/Vehdg/

Question 9

Po prostu sam miałem ten problem. Rozwiązanie, które znalazłem, obejmowało wiele cieni w pudełku (po jednym dla każdej strony, dla której chcesz mieć swój cień). Oto definicja:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Oto jak o tym myśleć:

najpierw ustaw rozkład na 0 (spowoduje to wyłączenie efektu ze wszystkich stron)
przesunięcie h (jeśli ustawisz je na dodatnie, będzie rzucane po lewej stronie, jeśli ustawisz je na ujemne, po prawej stronie)
przesunięcie v (jeśli ustawisz je na dodatnie, będzie rzucane na górnej stronie, jeśli ustawisz je na ujemne, na dolnej stronie

Tutaj możesz zobaczyć moją skrzynkę z cieniem box-shadow z trzech stron (lewa, góra, prawa i dół ma ten sam kolor co tło, aby stworzyć efekt, który chciałem - lewa strona i prawa sięgają aż do dołu ) https://codepen.io/cponofrei/pen/eMMyQX

Question 10

Możesz uzyskać jednostronny, wewnętrzny cień, ustawiając overflow:hiddenelement div i dodając elementy cienia wzdłuż granic.

Ustaw cień wewnętrzny na górnej i dolnej krawędzi podziału:

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}

Question 11

box-shadowdotyczy wszystkich czterech stron. Nie możesz tego zmienić (jeszcze?). W 4 rozmiary w tej box-shadowdefinicji są OffsetX, offsetY, Bluri Spread.

Question 12

Wiele cieni w pudełku załatwiło sprawę dla mnie.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

Answer 1

80

Zastanawiam się nad obsługą wewnętrznych cieni specyficznych dla bocznych stron w css3.

Wiem, że to działa świetnie w obsługiwanych przeglądarkach.

div { box-shadow:inset 0px 1px 5px black; }

Ciekawi mnie tylko, czy jest sposób na osiągnięcie czegoś takiego:

div { box-shadow-top:inset 0px 1px 5px black; }

css ndmweb
źródło

Możliwy duplikat Jak uzyskać cień pola tylko po lewej i prawej stronie , który zawiera bardziej szczegółowe odpowiedzi i objaśnienia.

brichins

Answer 2

Możliwy duplikat Jak uzyskać cień pola tylko po lewej i prawej stronie , który zawiera bardziej szczegółowe odpowiedzi i objaśnienia.

brichins

Answer 3

147

Oto, co zadziałało dla mnie:

box-shadow: inset 1px 4px 9px -6px;

Przykład: http://jsfiddle.net/23Egu/

nischtname
źródło

9

Najbardziej eleganckie jak dotąd rozwiązanie.

enyo

Niesamowite! Walczyłem z tym od zawsze, ale ta pojedyncza linia przynosi najbardziej seksowną jednostronną granicę w historii. Dzięki!

Sliq

12

Warto zauważyć, że możesz przełączyć to box-shadow: inset 1px -4px 9px -6px;na cień dolny.

Justin Russell

7

Cień z lewej strony: Cień z box-shadow: inset 4px 1px 9px -6px; prawej strony:box-shadow: inset -4px 1px 9px -6px;

bryanbraun

hmm, więc wszystko, co robimy, to używamy dużej wartości spreadu, a następnie negujemy ją za pomocą negatywnego rozmycia. Clever

Samiullah Khan

Answer 4

9

Najbardziej eleganckie jak dotąd rozwiązanie.

enyo

Answer 5

Niesamowite! Walczyłem z tym od zawsze, ale ta pojedyncza linia przynosi najbardziej seksowną jednostronną granicę w historii. Dzięki!

Sliq

Answer 6

12

Warto zauważyć, że możesz przełączyć to box-shadow: inset 1px -4px 9px -6px;na cień dolny.

Justin Russell

Answer 7

7

Cień z lewej strony: Cień z box-shadow: inset 4px 1px 9px -6px; prawej strony:box-shadow: inset -4px 1px 9px -6px;

bryanbraun

Answer 8

hmm, więc wszystko, co robimy, to używamy dużej wartości spreadu, a następnie negujemy ją za pomocą negatywnego rozmycia. Clever

Samiullah Khan

Answer 9

Nie sądzę, że naprawdę potrzebujesz, box-shadow-topponieważ jeśli ustawisz offsetx0 i offsetyjakąkolwiek wartość dodatnią, tylko pozostały cień jest na górze.

jeśli chcesz mieć cień na górze i cień na dole, możesz po prostu użyć dwóch elementów div:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

jeśli chcesz pozbyć się cienia po bokach użyj rgbazamiast hexkoloru i ustaw większy offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

w ten sposób nadasz cieniu więcej krycia, aby boki pozostały ukryte, a przy większym przesunięciu uzyskasz mniej krycia

pełny przykład:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>

Answer 10

A cień będzie bardziej rozłożony, niż byś chciał. Boki również się przesunęły. Jest to zdecydowanie inny wynik niż box-shadow-topdałby. edytuj Ale tak zwykle też to robię =)

Rudie

Answer 11

@Rudie, jeśli chcesz pozbyć się cienia po bokach, użyj rgbazamiast hexkoloru i ustaw większy offsety: box-shadow: 0 5px 5px rgba (0,0,0, .5) w ten sposób nadasz cieniu więcej krycia, aby boki pozostały ukryte a im większe przesunięcie, tym mniejsze krycie

seler

Answer 12

3

Do Twojej wiadomości, zamiast dwóch zagnieżdżonych elementów div, aby uzyskać jednocześnie górne i dolne cienie, możesz to zrobić za pomocą jednego elementu div, używając tego:box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;

Jake Wilson,

Answer 13

używanie elementów :beforei afterz regularnymi wycinanymi cieniami overflow:hiddenw polu nadrzędnym, jak w tym przykładzie: http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>

Answer 14

To jest technika, która zadziałała dla mnie. W moim przypadku element #element był przewijalny, więc musiałem zmienić pozycję na lepką, aby zadziałał.

Mihai Răducanu

Answer 15

5

W większości przypadków możesz użyć gradientu tła do obejścia:

Przykład SCSS (z kompasem):

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

Omar Jalalzada
źródło

1

Czasami musimy po prostu cofnąć się i pomyśleć o tym, co próbujemy osiągnąć. I to jest często to, czego szukamy w przypadku jednostronnego wewnętrznego cienia pudełka. Znakomity. Gdybym mógł, dwukrotnie zagłosowałbym za!

random_user_name

Kiedy po raz pierwszy zobaczyłem ten komentarz, pomyślałem, że wygląda to na zbyt skomplikowane, aby kiedykolwiek działał, ale zadziałał idealnie. Dziękuję Ci!!

Alex

Answer 16

1

Czasami musimy po prostu cofnąć się i pomyśleć o tym, co próbujemy osiągnąć. I to jest często to, czego szukamy w przypadku jednostronnego wewnętrznego cienia pudełka. Znakomity. Gdybym mógł, dwukrotnie zagłosowałbym za!

random_user_name

Answer 17

Kiedy po raz pierwszy zobaczyłem ten komentarz, pomyślałem, że wygląda to na zbyt skomplikowane, aby kiedykolwiek działał, ale zadziałał idealnie. Dziękuję Ci!!

Alex

Answer 18

box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

To działa po prostu cudownie :)

Oto codepen ilustrujący to: http://codepen.io/poopsplat/pen/cGBLy

Answer 19

Dla tego samego cienia, ale tylko na górze:

box-shadow: inset 0px 6px 5px -5px black;

Aby cień był skierowany w jednym kierunku, należy zanegować parametr „rozmycie” za pomocą parametru „rozprzestrzenianie”, a następnie dostosować parametry „h-pos” i / lub „v-pos” o tę samą wartość. Nie działa z przeciwną lub potrójną ramką. Musisz dodać jeszcze jedną definicję.

Więcej przykładów tutaj: http://codepen.io/GBMan/pen/rVXgqP

Answer 20

1

Nie, nie bezpośrednio, ale możesz wyciąć części, których nie chcesz, umieszczając je w div z overflow: hidden:

http://jsfiddle.net/Vehdg/

Mark Kahn
źródło

Answer 21

Po prostu sam miałem ten problem. Rozwiązanie, które znalazłem, obejmowało wiele cieni w pudełku (po jednym dla każdej strony, dla której chcesz mieć swój cień). Oto definicja:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Oto jak o tym myśleć:

najpierw ustaw rozkład na 0 (spowoduje to wyłączenie efektu ze wszystkich stron)
przesunięcie h (jeśli ustawisz je na dodatnie, będzie rzucane po lewej stronie, jeśli ustawisz je na ujemne, po prawej stronie)
przesunięcie v (jeśli ustawisz je na dodatnie, będzie rzucane na górnej stronie, jeśli ustawisz je na ujemne, na dolnej stronie

Tutaj możesz zobaczyć moją skrzynkę z cieniem box-shadow z trzech stron (lewa, góra, prawa i dół ma ten sam kolor co tło, aby stworzyć efekt, który chciałem - lewa strona i prawa sięgają aż do dołu ) https://codepen.io/cponofrei/pen/eMMyQX

Answer 22

Możesz uzyskać jednostronny, wewnętrzny cień, ustawiając overflow:hiddenelement div i dodając elementy cienia wzdłuż granic.

Ustaw cień wewnętrzny na górnej i dolnej krawędzi podziału:

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}

Answer 23

Wielu twierdzi, że dodawanie takich dodatkowych znaczników nie jest semantyczne i jest złą praktyką. Można to osiągnąć, używając inseti wykazując się kreatywnością, używając wartości css box-shadow. Pamiętaj, że możesz układać cienie boxów na tym samym elemencie. Można więc użyć czegoś takiego, jak @Jakobud powiedział w powyższym komentarzu: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; Innym sposobem, który jest tylko trochę mniej obraźliwy niż dodawanie niepotrzebnych znaczników, jest użycie :beforei :afterselektorów. Ale po co to robić, jeśli możesz to zrobić, bezpośrednio wybierając i stylizując oryginalny element.

ORyan

Answer 24

0

box-shadowdotyczy wszystkich czterech stron. Nie możesz tego zmienić (jeszcze?). W 4 rozmiary w tej box-shadowdefinicji są OffsetX, offsetY, Bluri Spread.

Rudie
źródło

1

Spread i Blur to nie to samo. Każdy ma osobne wartości. Więc technicznie istnieją 6. Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusi Color. Jak zauważyli inni, możesz określić jedną stronę w ten sposóbbox-shadow: inset 0 8px 6px -6px black;

ORyan

1

Prawdziwe. Zmieniłem odpowiedź, aby odzwierciedlić wszystkie 4 rozmiary .

Rudie

Answer 25

1

Spread i Blur to nie to samo. Każdy ma osobne wartości. Więc technicznie istnieją 6. Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusi Color. Jak zauważyli inni, możesz określić jedną stronę w ten sposóbbox-shadow: inset 0 8px 6px -6px black;

ORyan

Answer 26

1

Prawdziwe. Zmieniłem odpowiedź, aby odzwierciedlić wszystkie 4 rozmiary .

Rudie

Answer 27

Wiele cieni w pudełku załatwiło sprawę dla mnie.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

Czy CSS3 box-shadow: inset może mieć tylko jedną lub dwie strony? jak border-top?

Odpowiedzi:

pełny przykład:

CSS

HTML