{"id":91369,"date":"2022-10-11T18:55:34","date_gmt":"2022-10-11T23:55:34","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-css-box-shadow-13-knep-och-exempel\/"},"modified":"2022-10-11T18:55:34","modified_gmt":"2022-10-11T23:55:34","slug":"hur-man-anvander-css-box-shadow-13-knep-och-exempel","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-css-box-shadow-13-knep-och-exempel\/","title":{"rendered":"Hur man anv\u00e4nder CSS box-shadow: 13 knep och exempel"},"content":{"rendered":"
\n

CSS \u00e4r spr\u00e5kutvecklarna anv\u00e4nder f\u00f6r att styla en webbsida. Den styr hur HTML-element visas p\u00e5 en sk\u00e4rm, p\u00e5 papper eller i n\u00e5gon annan form av media. CSS ger full anpassningskraft f\u00f6r att utforma webbsidan i din egen bild.<\/p>\n

Du kan \u00e4ndra ett elements bakgrundsf\u00e4rg, teckensnittsstil, teckensnittsf\u00e4rg, box-skugga, marginal och m\u00e5nga andra egenskaper med hj\u00e4lp av CSS. Vi g\u00e5r igenom n\u00e5gra effektiva anv\u00e4ndningar av box-shadow i den h\u00e4r guiden.<\/p>\n

<\/span> Vad \u00e4r CSS box-shadow?<\/span><\/h2>\n

De box-skugga<\/strong> egenskapen anv\u00e4nds f\u00f6r att applicera en skugga p\u00e5 HTML-element. Det \u00e4r en av de mest anv\u00e4nda CSS-egenskaperna f\u00f6r styling av l\u00e5dor eller bilder.<\/p>\n

CSS-syntax:<\/strong><\/p>\n

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];<\/pre>\n
      horisontell offset:<\/strong> Om den horisontella offseten \u00e4r positiv kommer skuggan att vara till h\u00f6ger om rutan.  Och om den horisontella offseten \u00e4r negativ, kommer skuggan att vara till v\u00e4nster om rutan.   vertikal offset:<\/strong> Om den vertikala offseten \u00e4r positiv kommer skuggan att ligga under rutan.  Och om den vertikala offseten \u00e4r negativ kommer skuggan att vara ovanf\u00f6r rutan.   osk\u00e4rpa radie:<\/strong> Ju h\u00f6gre v\u00e4rde, desto suddigare blir skuggan.   spridningsradie:<\/strong> Det betyder hur mycket skuggan ska spridas.  Positiva v\u00e4rden \u00f6kar spridningen av skuggan, negativa v\u00e4rden minskar spridningen.   F\u00e4rg:<\/strong> Det betyder skuggans f\u00e4rg.  Dessutom st\u00f6der det alla f\u00e4rgformat som rgba, hex eller hsla.  <\/ol>\n
    Parametrarna f\u00f6r osk\u00e4rpa, spridning och f\u00e4rg \u00e4r valfria.  Den mest intressanta delen av box-shadow \u00e4r att du kan anv\u00e4nda ett kommatecken f\u00f6r att separera box-shadow-v\u00e4rden hur m\u00e5nga g\u00e5nger som helst.  Detta kan anv\u00e4ndas f\u00f6r att skapa flera kanter och skuggor p\u00e5 elementen.<\/p>\n
    <\/span>  1. L\u00e4gg till en d\u00e4mpad box-skugga till v\u00e4nster, h\u00f6ger och botten av boxen<\/span><\/h2>\n
    Du kan l\u00e4gga till mycket svaga skuggor p\u00e5 tre sidor (v\u00e4nster, h\u00f6ger och botten) av rutan med hj\u00e4lp av f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  2. L\u00e4gg till en Dim box-skugga p\u00e5 alla sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till ljusa skuggor p\u00e5 alla sidor av rutan genom att anv\u00e4nda f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  3. L\u00e4gg till en tunn box-skugga p\u00e5 botten och h\u00f6ger sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till skuggor l\u00e4ngst ner och till h\u00f6ger i rutan med hj\u00e4lp av f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  4. L\u00e4gg till en m\u00f6rk box-skugga p\u00e5 alla sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till m\u00f6rk skugga p\u00e5 alla sidor av rutan genom att anv\u00e4nda f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  5. L\u00e4gg till spridningsskugga p\u00e5 alla sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till spridd skugga p\u00e5 alla sidor av rutan med f\u00f6ljande kommando med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  6. L\u00e4gg till en tunn kantskugga p\u00e5 alla sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till en enkel kantskugga p\u00e5 alla sidor av rutan med hj\u00e4lp av f\u00f6ljande CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  7. L\u00e4gg till en box-skugga p\u00e5 botten och v\u00e4nster sida<\/span><\/h2>\n
    Du kan l\u00e4gga till en skugga l\u00e4ngst ner och till v\u00e4nster i rutan med hj\u00e4lp av f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  8. L\u00e4gg till en d\u00e4mpad box-skugga till de \u00f6vre och v\u00e4nstra sidorna, m\u00f6rk skugga till de nedre och h\u00f6gra sidorna<\/span><\/h2>\n
    Du kan l\u00e4gga till en ljus skugga l\u00e4ngst upp och till v\u00e4nster i rutan samt en m\u00f6rk skugga l\u00e4ngst ner och till h\u00f6ger i rutan med hj\u00e4lp av f\u00f6ljande CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  9. L\u00e4gg till en tunn, f\u00e4rgad kantskugga p\u00e5 alla sidor<\/span><\/h2>\n
    Du kan l\u00e4gga till en enkel f\u00e4rgad kantskugga p\u00e5 alla sidor av rutan genom att anv\u00e4nda f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  10. L\u00e4gg till flerf\u00e4rgade kantskuggor p\u00e5 l\u00e5dans nedre och v\u00e4nstra sida<\/span><\/h2>\n
    Du kan l\u00e4gga till flera f\u00e4rgade kantskuggor l\u00e4ngst ner och till v\u00e4nster i rutan med hj\u00e4lp av f\u00f6ljande CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  11. L\u00e4gg till flerf\u00e4rgade kantskuggor i botten<\/span><\/h2>\n
    Du kan l\u00e4gga till flera f\u00e4rgade kantskuggor l\u00e4ngst ner i rutan med hj\u00e4lp av f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  12. L\u00e4gg till flerf\u00e4rgade kantskuggor l\u00e4ngst ner och till h\u00f6ger p\u00e5 l\u00e5dan<\/span><\/h2>\n
    Du kan l\u00e4gga till flera f\u00e4rgade kantskuggor l\u00e4ngst ner och till h\u00f6ger i rutan med hj\u00e4lp av f\u00f6ljande CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  13. L\u00e4gg till ljusa skuggor p\u00e5 v\u00e4nster och h\u00f6ger sida, sprid skugga till botten<\/span><\/h2>\n
    Du kan l\u00e4gga till ljusa skuggor till v\u00e4nster och h\u00f6ger sida och sprida skugga till botten av rutan med hj\u00e4lp av f\u00f6ljande box-shadow CSS med ditt m\u00e5l-HTML-element:<\/p>\n
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;<\/pre>\n
    Produktion:<\/strong><\/p>\n
    \n<\/figure>\n
    <\/span>  Integrera CSS med en HTML-sida<\/span><\/h2>\n
    Nu vet du hur du l\u00e4gger till coola box-skuggeffekter med CSS, du kan enkelt integrera dem med HTML-element p\u00e5 flera s\u00e4tt.<\/p>\n
    Du kan b\u00e4dda in den i sj\u00e4lva HTML-sidan eller bifoga den som ett separat dokument.  Det finns tre s\u00e4tt att inkludera CSS i ett HTML-dokument:<\/p>\n
    <\/span>Intern CSS<\/span><\/h3>\n
    Inb\u00e4ddade eller interna formatmallar infogas i <\/strong> avsnitt av ett HTML-dokument med hj\u00e4lp av <\/strong> element.  Du kan skapa valfritt antal <\/strong> element i ett HTML-dokument, men de m\u00e5ste vara inneslutna mellan <\/strong> och  taggar.  H\u00e4r \u00e4r ett exempel som visar hur man anv\u00e4nder intern CSS med ett HTML-dokument:<\/p>\n
    <!DOCTYPE html><html lang=\"en\" dir=\"ltr\"><head><meta charset=\"utf-8\"><title>CSS box-shadow<\/title><style type=\"text\/css\">.heading {text-align: center;}.image-box {display: block;margin-left: auto;margin-right: auto;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}<\/style><\/head><body><div><h2 class=\"heading\">Style 4<h2><img class=\"image-box\" src=\"https:\/\/www.makeuseof.com\/css-box-shadow-tricks-examples\/MUO.jpg\"><\/div><\/body><\/html><\/pre>\n
    <\/span>Inline CSS<\/span><\/h3>\n
    Inline CSS anv\u00e4nds f\u00f6r att l\u00e4gga till unika stilregler till ett HTML-element.  Den kan anv\u00e4ndas med ett HTML-element via stil<\/strong> attribut.  Style-attributet inneh\u00e5ller CSS-egenskaper i form av \u201cfastighetsv\u00e4rde\u201d<\/strong> separerade med semikolon (;<\/strong>).<\/p>\n
    Alla CSS-egenskaper m\u00e5ste finnas p\u00e5 en rad, dvs det ska inte finnas n\u00e5gra radbrytningar mellan CSS-egenskaperna.  H\u00e4r \u00e4r ett exempel som visar hur man anv\u00e4nder inline CSS med ett HTML-dokument:<\/p>\n
    <!DOCTYPE html><html lang=\"en\" dir=\"ltr\"><head><meta charset=\"utf-8\"><title>CSS box-shadow<\/title><\/head><body><div><h2 class=\"heading\" style=\"text-align: center;\">Style 4<h2><img src=\"https:\/\/www.makeuseof.com\/css-box-shadow-tricks-examples\/MUO.jpg\" class=\"image-box\" style=\"box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin-left: auto; margin-right: auto;\"><\/div><\/body><\/html><\/pre>\n
    <\/span>Extern CSS<\/span><\/h3>\n
    Extern CSS \u00e4r det mest idealiska s\u00e4ttet att till\u00e4mpa stilar p\u00e5 HTML-dokument.  En extern stilmall inneh\u00e5ller alla stilregler i ett separat dokument (.css-fil), detta dokument l\u00e4nkas sedan till HTML-dokumentet med hj\u00e4lp av <\/strong> m\u00e4rka.  Den h\u00e4r metoden \u00e4r den b\u00e4sta metoden f\u00f6r att definiera och till\u00e4mpa stilar p\u00e5 HTML-dokumenten eftersom den p\u00e5verkade HTML-filen kr\u00e4ver minimala \u00e4ndringar i uppm\u00e4rkningen.  H\u00e4r \u00e4r ett exempel som visar hur man anv\u00e4nder extern CSS med ett HTML-dokument:<\/p>\n
    Skapa en ny CSS-fil med .css<\/strong> f\u00f6rl\u00e4ngning.  L\u00e4gg nu till f\u00f6ljande CSS-kod i den filen:<\/p>\n
    .heading {text-align: center;}.image-box {display: block;margin-left: auto;margin-right: auto;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}<\/pre>\n
    Slutligen, skapa ett HTML-dokument och l\u00e4gg till f\u00f6ljande kod i det dokumentet:<\/p>\n
    <!DOCTYPE html><html lang=\"en\" dir=\"ltr\"><head><meta charset=\"utf-8\"><title>CSS box-shadow<\/title><link rel=\"stylesheet\" href=\"https:\/\/www.makeuseof.com\/css-box-shadow-tricks-examples\/styles.css\"><\/head><body><div><h2 class=\"heading\">Style 4<h2><img class=\"image-box\" src=\"https:\/\/www.makeuseof.com\/css-box-shadow-tricks-examples\/MUO.jpg\"><\/div><\/body><\/html><\/pre>\n
    Observera att CSS-filen \u00e4r l\u00e4nkad till HTML-dokumentet via <\/strong> tagga och href<\/strong> attribut.<\/p>\n
    Alla ovanst\u00e5ende tre metoder (Intern CSS, Inline CSS och External CSS) kommer att visa samma utdata-<\/p>\n
    \n<\/figure>\n
    <\/span>  G\u00f6r din webbsida elegant med CSS<\/span><\/h2>\n
    Genom att anv\u00e4nda CSS har du full kontroll \u00f6ver stilen p\u00e5 din webbsida.  Du kan anpassa varje HTML-element med olika CSS-egenskaper.  Utvecklare fr\u00e5n hela v\u00e4rlden bidrar till CSS-uppdateringar, och de har gjort det sedan lanseringen 1996. Som s\u00e5dan har nyb\u00f6rjare mycket att l\u00e4ra sig!<\/p>\n
    Lyckligtvis \u00e4r CSS nyb\u00f6rjarv\u00e4nligt.  Du kan f\u00e5 utm\u00e4rkt tr\u00e4ning genom att b\u00f6rja med n\u00e5gra enkla kommandon och se vart din kreativitet tar dig.<\/p>\n
        Om f\u00f6rfattaren<\/strong><\/p>\n
                Yuvraj Chandra (80 artiklar publicerade)
    <\/strong><\/p>\n
    Yuvraj \u00e4r en datavetenskapsstudent vid University of Delhi, Indien.  Han brinner f\u00f6r Full Stack Web Development.  N\u00e4r han inte skriver unders\u00f6ker han djupet i olika teknologier.<\/p>\n
                                Mer fr\u00e5n Yuvraj Chandra<\/p>\n
    <\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
    G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
    Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
    \n
    \n
    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n