Obramowanie CSS to kluczowa właściwość używana do charakteryzowania i stylizacji obramowań wokół komponentów HTML. Obramowania odgrywają istotną rolę w kompozycji witryny internetowej, pomagając w separacji, podkreśleniu i stylowym uroku. W CSS możesz wykorzystać kilka właściwości związanych z obramowaniami, aby kontrolować styl, różnorodność, rozmiar i kształt tych obramowań. W tym artykule zbadamy właściwości obramowań CSS i pokażemy, jak je naprawdę wykorzystać.
Właściwości obramowania CSS
Właściwości obramowania CSS są wykorzystywane do określenia stylu, różnorodności, szerokości oraz przypływów i odpływów obramowań komponentu. Właściwości te obejmują:
- styl graniczny
- kolor ramki
- szerokość granicy
- promień granicy
1) Styl obramowania CSS
Właściwość Styl obramowania służy do określenia typu obramowania, które ma być wyświetlane na stronie internetowej.
Istnieje kilka wartości stylu obramowania, które są używane z właściwością border-style do definiowania obramowania.
Emoji iPhone'a na Androidzie
| Wartość | Opis |
|---|---|
| nic | Nie definiuje żadnej granicy. |
| kropkowany | Służy do definiowania kropkowanej granicy. |
| przerywany | Służy do definiowania przerywanej granicy. |
| solidny | Służy do definiowania stałej granicy. |
| podwójnie | Definiuje dwie granice o tej samej wartości szerokości obramowania. |
| rowek | Definiuje trójwymiarową, rowkowaną ramkę. efekt jest generowany zgodnie z wartością koloru obramowania. |
| grzbiet | Definiuje trójwymiarową prążkowaną granicę. efekt jest generowany zgodnie z wartością koloru obramowania. |
| wstawka | Definiuje wstawkę 3D. efekt jest generowany zgodnie z wartością koloru obramowania. |
| początek | Definiuje trójwymiarową granicę początkową. efekt jest generowany zgodnie z wartością koloru obramowania. |
Przykład:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Wyjście:
2) Szerokość obramowania CSS
Właściwość border-width służy do ustawiania szerokości obramowania. Jest on ustawiony w pikselach. Możesz także użyć jednej z trzech predefiniowanych wartości: cienkiej, średniej lub grubej, aby ustawić szerokość obramowania.
Uwaga: Właściwość border-width nie jest wykorzystywana samodzielnie. Jest stale używany z innymi właściwościami obramowania, takimi jak właściwość „w stylu obramowania”, aby ustawić obramowanie jako pierwsze, w przeciwnym razie nie będzie działać.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Wyjście:
3) Kolor obramowania CSS
Istnieją trzy strategie ustawiania koloru obramowania.
- Nazwa: Określa nazwę koloru. Na przykład: „czerwony”.
- RGB: Określa wartość RGB koloru. Na przykład: „rgb(255,0,0)”.
- Hex: Określa wartość heksa koloru. Na przykład: „#ff0000”.
Uwaga: Właściwość border-color nie jest wykorzystywana samodzielnie. Jest stale używany z innymi właściwościami obramowania, takimi jak właściwość „w stylu obramowania”, aby ustawić obramowanie jako pierwsze, w przeciwnym razie nie będzie działać.
Przykład:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Wyjście:
