Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.
Jak dodać obramowanie do dowolnego elementu: linia przerywana (kreskowa i kropkowa), linia ciągła, podwójne obramowanie, rowek, grzbiet, ramka, przycisk?
selektor { border-top-style: styl }
selektor { border-bottom-style: styl }
selektor { border-left-style: styl }
selektor { border-right-style: styl }
Jak ustawić styl obramowania dla wszystkich krawędzi jednocześnie?
selektor { border-style: wartości atrybutów }
Jak ustawić szerokość (grubość) obramowania dowolnego elementu?
selektor { border-top-width: szerokość }
selektor { border-bottom-width: szerokość }
selektor { border-left-width: szerokość }
selektor { border-right-width: szerokość }
Jak ustawić szerokość (grubość) obramowania dla wszystkich krawędzi jednocześnie?
selektor { border-width: wartości atrybutów }
Jak ustawić kolor obramowania dowolnego elementu?
selektor { border-top-color: kolor }
selektor { border-bottom-color: kolor }
selektor { border-left-color: kolor }
selektor { border-right-color: kolor }
Jak ustawić kolor obramowania dla wszystkich krawędzi jednocześnie?
selektor { border-color: wartości atrybutów }
Jak ustawić szerokość (grubość), styl i kolor obramowania dowolnego elementu?
selektor { border-top: wartości atrybutów }
selektor { border-bottom: wartości atrybutów }
selektor { border-left: wartości atrybutów }
selektor { border-right: wartości atrybutów }
selektor { border: wartości atrybutów }
Co to jest obrys i czym się różni od obramowania?
selektor { outline-style: styl }
W jaki sposób ustawić szerokość (grubość) obrysu dowolnego elementu?
selektor { outline-width: szerokość }
W jaki sposób ustawić kolor obrysu dowolnego elementu?
selektor { outline-color: kolor }
Jak ustawić szerokość (grubość), styl i kolor obrysu dowolnego elementu?
selektor { outline: wartości atrybutów }
W jaki sposób odsunąć ramkę obrysu od krawędzi elementu?
selektor { outline-offset: rozmiar }
W jaki sposób wstawić na stronę element z zaokrąglonymi narożnikami?
selektor { border-top-left-radius: zaokrąglenie }
selektor { border-top-right-radius: zaokrąglenie }
selektor { border-bottom-right-radius: zaokrąglenie }
selektor { border-bottom-left-radius: zaokrąglenie }
Jak ustawić zaokrąglenia dla wszystkich narożników jednocześnie?
selektor { border-radius: wartości atrybutów }
W jaki sposób pozbyć się nieestetycznego efektu zanikania obramowania podczas przełamania strony lub linii?
selektor { box-decoration-break: dekoracja }
W jaki sposób podstawić efektownie wyglądający cień pod elementem?
selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... }
selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... }
Jak udekorować ramkę na stronie obramowaniem graficznym?
selektor { border-image-source: url(ścieżka dostępu do obrazka) }
Jak podzielić obramowanie graficzne na narożniki, krawędzie i środek?
selektor { border-image-slice: obcięcie }
W jaki sposób podać szerokość (grubość) obramowania obrazkowego?
selektor { border-image-width: szerokość }
Jak wysunąć obramowanie obrazkowe poza krawędzie elementu?
selektor { border-image-outset: nawis }
W jaki sposób powielić obrazek w postaci obramowania elementu?
selektor { border-image-repeat: powtarzanie }
Jak ustawić obrazek obramowania, jego narożniki, krawędzie, środek, a także jego szerokość (grubość) i powtarzanie (powielanie)?
selektor { border-image: wartości atrybutów }
Komentarze
- maromaro
27.04.2021 17:08
Box shadow można sobie wygodnie przetestować np. tutaj:
https://cssgenerator.pl/box-shadow-generator/
ja często korzystam z takich generatorów jak się uczę.
Zobacz więcej - Asokus
03.01.2017 23:37
Jeżeli użyję tej komendy (ustawię cień) dla diva i zaraz pod nim stworzę kolejnego to ten drugi div przyklei się do pierwszego tak że zasłoni ustawiony cień. Moje pytanie: Co zrobić aby cień rzucał się z priorytetem na wszystkie elementy strony? Dziękuję za odpowiedz!
Zobacz więcej - Comandeer
17.02.2016 00:06
Warto też od razu wspomnieć o border-image, mającym też sensowne wsparcie i pozwalającym na więcej: http://caniuse.com/#feat=border-image
Zobacz więcej - AzMoDaN
16.02.2016 23:49
Lepsza alternatywa na dziś: https://jsfiddle.net/0su56851/
Obsługiwane przez wszystko, co się liczy http://caniuse.com/#search=border-radius
Zobacz więcej - Gość
17.12.2015 13:58
u mnie wogóle nie działa czy wpiszę 1000px czy 1px nic nie zmienia :( czemu?
Zobacz więcej - Sick_Fantasy
20.05.2013 09:38
Ustawiałem w css dla kotwicy, ale znajomy już mnie skorygował, żebym dał dla obrazka to podziała i podziałało. :) Inne problemy też już udało się rozwiązać lepiej lub gorzej. ;)
Zobacz więcej - Roberto
20.05.2013 09:35
A dla jakiego elementu ustawiłeś brak obramowania? Ustawienie tego dla obrazków w odnośnikach działa zawsze.
Zobacz więcej - Sick_Fantasy
20.05.2013 08:06
Szerzej kwestie opisałem tu. http://www.forumweb.pl/tworzenie-stron-www/wyswietlanie-strony-pod-roznymi-przegladarkami,76434
Ale nikt nic nie napisał a potrzebuje pomocy.
Pod IE 8 w linkach z obrazkami wyskakuje mi obramowanie obrazka co generalnie psuje mi wygląd strony. Próbowałem to usunąć na...
Zobacz więcej - Roberto
08.05.2013 23:14
kamilexoN - tylko w nowszych przeglądarkach i nie w IE
http://caniuse.com/border-image
Zobacz więcej - kamilexoN
08.05.2013 19:51
Pytanko mianowicie mogę ustawić zdjęcie jako np. dolne obramowanie?
Zobacz więcej