Inne działy

 

 

CSS właściwość border-style

 

Definicja i Wykorzystanie

 

Właściwość border-style ustawia styl elementu dla czterech krawędzi. Ta właściwość może mieć od jednej do czterech wartości.

 

  • border-style:dotted solid double dashed;
    • górna krawędź jest dotted
    • prawa krawędź jest solid
    • dolna krawędź jest double
    • lewa krawędź jest dashed
  • border-style:dotted solid double;
    • górna krawędź jest dotted
    • prawa i lewa krawędź są solid
    • dolna krawędź jest double
  • border-style:dotted solid;
    • górna i dolna krawędź są dotted
    • prawa i lewa krawędź są solid
  • border-style:dotted;
    • wszystkie cztery krawędzie są dotted
Wartość domyślna: medium
Dziedziczenie: nie
Wersja: CSS1
JavaScript składnia: object.style.borderStyle="dotted double"

 

Właściwość border-style jest obsługiwana przez wszystkie główne przeglądarki.

Uwaga: Wersje programu Internet Explorer (w tym IE8) nie wspierają wartości właściwości "inherit" lub "hidden".

WartośćOpis
none Określa brak krawędzi
hidden Tak samo jak "none", z wyjątkiem rozwiązania konfliktu granicznego dla elementów tabeli
dotted Określa przerywaną krawędź
dashed Określa przerywaną krawędź
solid Określa ciągłą krawędź
double Określa podwójne obramowanie
groove Określa 3D rowkowane krawędzie. Efekt zależy od wartości border-color
ridge Określa 3D prążkowane krawędzie. Efekt zależy od wartości border-color
inset Określa 3D margines wewnętrzny krawędzi. Efekt zależy od wartości border-color
outset Określa 3D początek krawędzi. Efekt zależy od wartości border-color
inherit Określa, że styl obramowania powinien być dziedziczony z elementu nadrzędnego

 

 Przykład

div.border-style {border-style:dotted dashed solid double}

 Przykład

<style type="text/css">
div.styled {
border-width:6px;
border-color:#ff9900;
border-style: dotted dashed solid double;
}
</style>
<div class="styled">Ten "div" używa właściwości CSS border-style.
Spróbuj zmienić wartość, aby zobaczyć jak wpłynie ona na zmianę
stylów każdej krawędzi div.
</div>

 

 Przykład

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>

</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.