Elementuek ertz bat izan dezakete elementuaren kaxaren mugetan. Lehenespenez, nabigatzaileek ez dute ertzik erakusten, baina honako propietate hauek erabil ditzakegu hori definitzeko.
border-width —Propietate horrek ertzaren zabalera definitzen du. Ertzaren alde bakoitzaren zabalera zehazteko espazio batek bereizitako lau balio onartzen ditu (goikoa, eskuinekoa, behekoa eta ezkerrekoa orden horri jarraikiz). Halaber, alde bakoitzerako zabalera modu independentean adieraz dezakegu border-top-width, border-bottom-width, border-left-width eta border-right-width propietateekin.
border-style —Propietate horrek ertzaren estiloa definitzen du. Ertzaren alde bakoitzeko estiloak zehazteko espazio batek bereizitako lau balio onartzen ditu (goikoa, eskuinekoa, behekoa eta ezkerrekoa, ordena horretan). Balio erabilgarriak none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset dira. Lehenetsitako balioa none da, eta horrek esan nahi du ertza ez dela agertuko balio bat esleitu ezean propietateari. Estiloak modu independentean ere adieraz ditzakegu, border-top-style, border-bottom-style, border-left-style eta border-right-style propietateekin.
border-kolorea —Propietate horrek ertzaren kolorea definitzen du. Ertzaren alde bakoitzaren kolorea zehazteko espazio batek bereizitako lau balio onartzen ditu (goikoa, eskuinekoa, behekoa eta ezkerrekoa, ordena horretan). Koloreak modu independentean ere adieraz ditzakegu, ezaugarri hauekin: border-top-color, border-bottom-color, border-left-color eta border-right-color.
border —Propietate honek ertzaren atributu guztiak aldi berean deklaratzeko aukera ematen digu. Border-top, border-bottom, borderleft eta border-right propietateak ere erabil ditzakegu ertz bakoitzaren balioak modu independentean definitzeko.
Elementu bati ertz bat esleitzeko, estiloa border-style propietatearekin definitu behar dugu. Estiloa definitu ondoren, nabigatzaileak lehenetsitako balioak erabiltzen ditu ertza sortzeko. Nabigatzaileari balio horiek zehazten utzi nahi ez badiogu, gainerako propietateak erabil ditzakegu ertzaren atributu guztiak konfiguratzeko. Beheko kodeak 2 pixeleko zabalerako ertz solido bat esleitzen dio gure dokumentuaren goiburuari.
Background jabetzarekin egin dugun bezala, balio guztiak batera deklara ditzakegu border propietatearentzat. Hurrengo adibideak 10 pixeleko ertz eten urdinxka sortzen du.
Propietate horiek dituen ertz agregatua elementuaren kaxaren inguruan marrazten da, eta horrek esan nahi du izkina zuzenak dituen laukizuzen bat deskribatuko duela.
Gure diseinuak ertz biribilduak behar baditu, propietate hau gehi dezakegu.
border-radius —Propietate horrek definitzen du nabigatzaileak ertz biribilduak marrazteko erabiliko duen zirkulu birtualaren erradioa. Gehienez ere lau balio onartzen ditu izkina bakoitzaren erradioak zehazteko (goiko ezkerra, goiko eskuina, beheko eskuina eta beheko ezkerra, ordena horretan). Border-top-leftradius, border-top-right-radius, border-bottom-right-radius eta borderbottom-left-radius propietateak ere erabil ditzakegu izkina bakoitzaren erradioa modu independentean definitzeko.
Beheko kodeak 6 pixeleko lodiera solidoa eta 20 pixeleko erradioko angelu biribilduak dituen ertza sortzen du goiburuarentzat.
Angelu guztiak berdinak badira, balio bakarra adieraz dezakegu propietate horretarako, aurreko adibidean egin dugun bezala. Hala ere, margin eta padding propietateekin bezala, angelu desberdinak izatea nahi badugu, horietako bakoitzerako balio desberdinak zehaztu behar ditugu.
Beheko irudian ikus dezakezuen bezala border-radius propietateari esleitutako balioek lau kokapen desberdin adierazten dituzte. Balioak erloju-orratzen norabidean adierazten dira beti, goiko ezkerreko angelutik hasita. Ordena hau da: goiko ezkerreko muturra, goiko eskuineko muturra, beheko eskuineko muturra eta beheko ezkerreko muturra.
Balio desberdineko ‘border-radius’ esleitu dizkiogu goiburuari
Oinarrizkoa: margin eta padding propietateek bezala, border-radius propietateak ere bi balio bakarrik onar ditzake. Lehenengo balioak lehenengo eta hirugarren angeluei (goiko ezkerrekoari eta beheko eskuinekoari) eta bigarren balioak bigarren eta laugarren angeluei (goiko eskuinekoari eta beheko ezkerrekoari) eragiten die.
Angeluen forma ere alda dezakegu, balioak barra zeihar batez bereizita gehituz. Ezkerreko balioek erradio horizontala adierazten dute, eta eskuinekoak, berriz, erradio bertikala. Balio horien konbinazioak elipse bat sortzen du.
Mutur eliptikoa duten angeluak esleitu dizkiogu goioburuari
Egin ezazu zeuk: Kopiatu zure CSS fitxategian probatu nahi dituzun estiloak eta ireki dokumentua zure nabigatzailean. Aldatu propietate bakoitzaren balioak nola lan egiten duten ulertzeko.
Sortu berri ditugun ertzak elementuaren kaxaren mugetan marrazten dira, baina elementua muga horietatik urrun marrazten den bigarren ertz batekin ere ingura dezakegu elementua. Ertz mota horien helburua elementua nabarmentzea da. Nabigatzaile batzuek testua demarkatzeko erabiltzen dute, baina gehienek bigarren ertz bat marrazten dute kutxaren mugetatik kanpo. CSSk propietate hauek eskaintzen ditu bigarren ertz hori sortzeko.
outline-width —Propietate horrek ertzaren zabalera definitzen du. Onartzen ditu balioak CSSn erabilgarri dagoen edozein unitatetan (px, %, em, etab.) eta baita thin, medium eta thick gako-hitzak ere.
outline-style —Propietate horrek ertzaren estiloa definitzen du. Balio erabilgarriak none, auto, dotted, dashed, solid, double, groove, ridge, inset eta outset dira.
outline-color —Propietate horrek ertzaren kolorea definitzen du.
outline-offset —Propietate horrek desplazamendua definitzen du (kutxaren mugetatik bigarren ertza zein distantziatara marraztuko den). Onartzen ditu balioak CSSn erabilgarri dagoen edozein unitatetan (px, %, em, etab.).
outline —Propietate horrek ertzaren zabalera, estiloa eta kolorea aldi berean zehazteko aukera ematen digu (desplazamendua outline-offset propietatearekin definitu behar da oraindik).
Desplazamenduaren balio lehenetsia 0 da; beraz, bigarren ertza kaxaren ertzaren ondoren marraztuko da. Bi ertzak bereizi nahi baditugu, outline-offset propietatea definitu behar dugu.
Goiko kodean, 2 pixeleko bigarren ertz bat gehituko dugu, 15 pixeleko desplazamenduarekin, gure dokumentuaren goiburuko kutxari esleitutako jatorrizko estiloetara.
Bigarren ertza, lehenarengandik 15 pixelera
border eta outline propietateek lortutako efektuak lerro soiletara eta konfigurazio-aukera gutxi batzuetara mugatzen dira, baina CSSk ertz pertsonalizatuak definitzeko aukera ematen digu, muga horiek gainditzeko irudiak erabiliz. Honako propietate hauek biltzen dira helburu horrekin.
border-image-source —Propietate horrek zehazten du ertza sortzeko erabiliko den irudia. Fitxategiaren URLa URL () funtzioarekin deklaratzen da (adibidez, URL (“adreiluak.jpg”)).
border-image-width —Propietate honek ertzaren zabalera definitzen du. Onartzen ditu balioak CSSn erabilgarri dagoen edozein unitatetan (px, %, em, etab.).
border-image-repeat —Propietate horrek definitzen du nola erabiltzen den irudia ertza sortzeko. Balio erabilgarriak repeat, round, stretch eta space dira.
border-image-slice —Propietate horrek definitzen du nola moztuko den irudia ertzaren izkinak irudikatzeko. Lau balio esleitu behar ditugu erabiliko diren irudiaren lau zatiak zehazteko (balio bakarra adierazten bada, alde guztietarako erabiltzen da). Balioa zenbaki oso gisa edo ehunekotan zehaztu daiteke.
border-image-outset —Propietate honek ertzaren desplazamendua definitzen du (elementuaren kutxatik dagoen distantzia). Onartzen ditu balioak CSSn erabilgarri dagoen edozein unitatetan (px, %, em, etab.).
border-image —Propietate honek ertzaren atributu guztiak aldi berean zehazteko aukera ematen digu.
Propietate horiek irudi bat erabiltzen dute patroi gisa. Emandako balioen arabera, irudia pastel bat bezala mozten da beharrezko piezak lortzeko, eta gero pieza horiek elementuaren inguruan egokitzen dira ertza eraikitzeko.
Ertza irudiez osatua
Helburu hori lortzeko, hiru ezaugarri adierazi behar ditugu: irudiaren fitxategiaren kokapena (url eta parentesiaren artean ez utzi tarterik), patroitik atera nahi ditugun piezen tamaina eta pieza horiek elementuaren inguruan nola banatuko diren zehazten duten gako-hitzak.
Goian, 29 pixeleko ertza sortuko dugu goiburuko kaxarako, eta gero adreiluen irudia kargatuko dugu url(irudiak/CSS/adreiluParetaTxikia.png), ertza eraikitzeko. border-image-slice propietateari esleitutako 10 balioak piezen tamaina adierazten du, eta stretch balioa, border-image-repeat propietateari esleitua, pieza horiek kutxaren inguruan banatzeko eskura dagoen metodoetako bat da. Azken atributu horretarako hiru balio daude eskuragarri.
repeat –elementuaren aldea estaltzeko behar beste aldiz errepikatzen ditu iruditik hartutako piezak. Kasu horretan, piezaren tamaina zaindu egiten da, eta irudia moztu, baldin eta ez badago nahikoa leku pieza kokatzeko.
roundkaxaren aldearen luzera kalkulatzen du eta, ondoren, piezak luzatzen ditu, bat ere mozten ez dela ziurtatzeko.
stretchpieza bat luzatzen du alde osoa estali arte. Goiko irudian erabili dugu metodo hori.
Beti bezala, balio guztiak aldi berean adieraz ditzakegu propietate bakar bat erabiliz.
Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.
