Rėmelių ir fonų naudojimas HTML5

Turinys
Yra ypatybės, plačiai naudojamos HTML ir CSS, pvz., kraštinės ir fonas, Įtraukus CSS3, jie buvo patobulinti taip, kad, pavyzdžiui, turėtume suapvalintus kraštus, nors tai atrodo gana paprasta, anksčiau to nebuvo, todėl šios funkcijos dabar gana palengvina tiek dizainerių, tiek kūrėjų darbas.
Taikydami kraštą, turime atsižvelgti į 3 labai svarbius požymius:
  • ribos plotis: inicijuoja krašto plotį.
  • pasienio stilius: inicijuoja sienos piešimo stilių.
  • apvado spalva: inicijuoja kraštinės spalvą.
Susipažinę su savybėmis, pažvelkime į paprastą krašto taikymo pavyzdį:
 Pavyzdys

Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.


Norėdami apibrėžti kraštinės plotį, galime dirbti pagal 3 matavimus pagal matavimo vienetus, tokius kaip pikselių, cm, em; procentais ir išankstiniais nustatymais, pvz. plonas, vidutinis ir storas.
Mes apibrėžiame sienos tipą pagal stilių, todėl turime šias parinktis:
  • nė vienas
  • brūkšniuotas
  • taškuotas
  • dvigubas
  • griovelis
  • įterpti
  • pradžioje
  • ketera
  • kietas
Dabar pažiūrėkime grafiškai, ką reiškia kiekvienas iš šių stilių:

Taip pat yra galimybė kiekvienai elemento pusei pritaikyti kraštinę ir stilių, tam naudosime šias instrukcijas:
[spalva = # d3d3d3] kraštinė-viršaus plotis
pasienio stiliaus
border-top-color [/ spalva]
border-bottom-width
border-bottom stilius
apvado apačios spalva
[spalva = # d3d3d3] kraštinė-kairė-plotis
pasienio-kairiojo stiliaus
border-left-color [/ spalva]
[spalva = # d3d3d3] kraštinė-dešinysis plotis
pasienio-dešiniojo stiliaus
border-right-color [/ spalva]
Kur viršuje nurodo viršuje, apačioje į apatinį, kairėje į kairę ir teisingai dešinėje.
Tokiu būdu mes netgi galime pasiekti to paties elemento kraštų derinius.
Pažvelkime į pastarojo pavyzdį:
 Pavyzdys

Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.


Kodas suteikia mums šiuos rezultatus:

Norėdami sukurti suapvalintus kraštus, galime naudoti šią savybę spinduliu kuris leidžia mums nurodyti krašto kreivio spindulį.
Pažiūrėkime, kaip įdiegti kodą:
 Pavyzdys

Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.


Tai parodo šį ekraną:

Baigdami šį vadovėlį apie šiuos elementus, dabar galime įtraukti savo CSS patobulinimus be didelių pastangų ir naudodami pažangiausias technologines priemones.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką

Padėsite svetainės plėtrą, dalintis puslapį su draugais

wave wave wave wave wave