CSS border (rāmis) parametri
CSS border - rāmja īpašība ļauj jums norādīt stilu un krāsu jebkuram elementam.
Piemēram šis virsraksts ir ieksā elementā, kuram norādīti apmales parametri!
Apmales stils
 |
Piezīme: Pēc noklusējuma elementiem nav robežu, un ja jūs gribat kādu elementu
izdalīt, pievērst uzmanību, tad viens no variantiem ir izmantot parametru border! |
|---|
pārrobežu stila vērtības:
border-style īpašības : none;
dotted: Definē punktoto apmali
dashed: Definē pārtrauktu robežu
solid: Definē stabilu robežu
double: Definē divas robežas. Abu robežu platums ir tāds pats kā robežas platuma vērtību
groove: Definē 3D rievotas apmales. Ietekme ir atkarīga no robežas krāsu vērtības
ridge: Definē 3D šķautņainu robežu. Ietekme ir atkarīga no robežas krāsu vērtības
inset: Definē 3D ielaidums robežu. Ietekme ir atkarīga no robežas krāsu vērtības
outset: Definē 3D sākuma robežu. Ietekme ir atkarīga no robežas krāsu vērtības
Pamēģini pats: Set stilu robežas
Apmales platums
Robežu platuma īpašība border-width: tiek izmantota, lai noteiktu platumu apmalei.
Platums ir noteikts pikseļos, vai arī izmantojot vienu no trim iepriekš noteiktām vērtībām:
thin, medium vai thick. Es tomēr iesaku jums apmales izmēru noteikt pikseļos (..px);
Piezīme: "robežu platums" īpašība nedarbojas, ja to izmanto atsevišķi.
Izmantojiet "robežu stila" īpašību, lai noteiktu robežas pirmās.
Vispār teikšu, ka es parasti stilizējot apmales izmantoju īpašību piemēram,
border: 1px solid green; vai border: 2px dotted #ffffff; , tāds pieraksts ekonomē laiku,
dažreiz doto īpašību var izmantot, lai parbaudīt, kāda tieši ir tā robeža elementam
veidojot izkārtojumu ( layout ). Vēl vairāki piemēri būs raksta turpinājumā!
Piemērs
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Izmēģiniet to pats »
Apmales krāsa
Robežu krāsu īpašumība tiek izmantota, lai noteiktu krāsu robežai.
Krāsas var noteikt saskaņā ar:
- nosaukums - norādiet krāsas nosaukumu, piemēram,"red"
- RGB - norādiet RGB vērtību, piemēram, "RGB (255,0,0)"
- Hex - norādīt hex vērtību, piemēram, "FF0000 #"
Jūs varat arī iestatīt apmales krāsu uz "transparent".
Piezīme: "border-color" īpašība nedarbojas, ja to izmanto atsevišķi.
Izmantojiet "border-style" īpašību, lai noteiktu apmales veidu sākumā.
Piemērs
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Izmēģiniet to pats »
Border-top border-left border-right border-bottom
Šitā īpašība ir ļoti noderīga, kad jūs nevēlaties likt apmali no visām pusēm, to var pielikt
tur tas ir nepieciešams, piemēram no labās puses (border-right: 1px solid green;):
Piemērs
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Izmēģiniet to pats »
Piemērs
Border - stenogrāfijas īpašība (saīsinājums,par ko
jau minēju)
Kā jūs varat redzēt no iepriekšminētajiem piemēriem, ir daudzas īpašības, kas jāņem vērā, strādājot ar robežām.
Lai saīsinātu kodu, tas ir arī iespējams norādīt visu individuālo robežu īpašības vienā īpašībā. To sauc par stenogrāfijas īpašību, saīsinājumu.
Robeža īpašums ir saīsinājums šādiem atsevišķiem pierobežas īpašībām:
- robežu platums
- robežu stila (obligāti)
- robežu krāsu
Vairāk Piemēri
Visi top robežu īpašības vienā deklarācijā
Šis piemērs parāda stenogrāfija īpašumu, lai noteiktu visas īpašības, lai augšējā robeža vienā deklarācijā.
Uzstādīt stilu apakšējo robežu
Šis piemērs parāda, kā noteikt stilu apakšējo robežu.
Noteikt platumu kreisās robežas
Šis piemērs parāda, kā noteikt platumu kreisās robežas.
Uzstādīt krāsu četrām malām
Šis piemērs parāda, kā noteikt krāsu četrām malām. Tas var būt no viena līdz četriem krāsām.
Uzstādīt krāsu labajā malā
Šis piemērs parāda, kā iestatīt krāsu labajā malā.
Visi CSS Robežu Properties
| Property | Description |
|---|
| border |
Sets all the border properties in one declaration, saīsinātais
pieraksts |
| border-bottom |
Sets all the bottom border properties in one declaration,
apakšējā apmale |
| border-bottom-color |
Sets the color of the bottom border, apakšējās apmales
krāsa |
| border-bottom-style |
Sets the style of the bottom border, stils |
| border-bottom-width |
Sets the width of the bottom border, platums |
| border-color |
Sets the color of the four borders, apmales krāsa |
| border-left |
Sets all the left border properties in one declaration,
kreisā apmale |
| border-left-color |
Sets the color of the left border, krāsa |
| border-left-style |
Sets the style of the left border, stils |
| border-left-width |
Sets the width of the left border, platums (pikseļos) |
| border-right |
Sets all the right border properties in one declaration,
labās puses apmale |
| border-right-color |
Sets the color of the right border |
| border-right-style |
Sets the style of the right border |
| border-right-width |
Sets the width of the right border |
| border-style |
Sets the style of the four borders |
| border-top |
Sets all the top border properties in one declaration,
augšējā apmale |
| border-top-color |
Sets the color of the top border |
| border-top-style |
Sets the style of the top border |
| border-top-width |
Sets the width of the top border |
| border-width |
Sets the width of the four borders |
|
