This translation is incomplete. Please help translate this article from English.

De nou, ja hem vist una mica les vores anteriorment a l'àrea d'aprenentatge: usos simples de com configurar colors i estils de vora. Aquí us proporcionarem una breu recopilació, i us donarem una idea del que hi ha més, com ara cantonades arrodonides i imatges de vores.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS.)
Objectiu: Aprendre la història completa sobre els elements d'estil de les vores.

Recapitulació de la vora

Com s'ha vist abans en el curs, els elements tenen una vora que s'asseu còmodament entre el farciment i el marge de l'element. De manera predeterminada, la vora té una mida de 0 - cosa que la fa invisible - però podeu definir el gruix, l'estil i el color de la vora per fer que aparegui.

Vora abreujat

La propietat abreujada border permet establir tots aquests, en tots els quatre costats alhora, per exemple:

<p>I have a red border!</p>
p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}

Opcions no abreujades

La vora (border) es pot dividir en nombroses propietats diferents no abreujades, per necessitats d'estil més específiques:

És possible que us pregunteu perquè hi ha tantes opcions no abreujades - bé, és útil tenir-les disponibles perquè pugueu reemplaçar o desactivar elements d'estil individual, si és necessari, sense haver de redefinir-los constantment; pot estalviar-vos moltes línies de codi a la llarga. També val la pena saber que la vora pren el color del text per defecte, i un ample de 3px, quan no s'estableixen valors explícitament.

Amb això en ment, vegem un exemple d'un planificador de progrés d'escriptura per a un llibre de ficció. Cada capítol està representat per un element <div> que està establert en un ample fix i conté el número i títol del capítol. El progrés d'escriptura s'indica amb la següent clau:

  • Capítols no iniciats/incomplets estan marcats per una vora amb punts.
  • Capítols que s'han escrit però necessiten ser revisats, estan marcats per una vora discontínua.
  • Capítols que estan complets (escrits i revisats), estan marcats per una vora sòlida.
  • Capítols que estan en procés de ser escrits o revisats, estan marcats per una vora inferior vermella, sòlida i gruixuda.

Vegem alguns CSS que podríem utilitzar per implementar això:

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  display: inline-block;
}

.complete {
  border-style: solid;
}

.written {
  border-style: dashed;
}

.incomplete {
  border-style: dotted;
}

.writing, .review {
  border-bottom: 6px solid red;
}

Això ens dóna el següent resultat:

Realment no hi ha molt estil utilitzat per aconseguir això. No hem declarat cap estil de vora en la regla div, en absolut; Només les classes específiques que hem utilitzat per transmetre els diferents punts en el procés editorial. Hem confiat en l'amplada i el color predeterminats de les vores, i només heu d'establir l'estil per a .complete, .written i .incomplete. A continuació, per a capítols on .writing o .review està activament en curs, hem hagut d'especificar tot el conjunt complet de propietats només per a la vora inferior. Això és molt més eficient que haver d'establir una vora abreujada completa per a cada tipus de caixa diferent.

Podeu trobar l'exemple a Github com a border-longhand.html (vegeu també el codi font).

Radi de vora

Les cantonades arrodonides en les caixes són una altra característica increïblement popular als llocs web - tan popular que els navegadors implementaven una propietat específicament per implementar cantonades arrodonides fàcilment: border-radius. Abans d'això (i a diverses imatges de fons que s'admetien), els desenvolupadors solien haver d'embolicar cada caixa que volien que tinguessin cantonades arrodonides en tres <div>s addicionals i adjuntar un gràfic de cantonada arrodonida separada a cadascun d'aquests quatre elements. Si volien que les seves caixes fossin flexibles, això és.

Nota: És possible que hàgiu de fer això si necessiteu tenir la mateixa aparença per als navegadors antics: border-radius és compatible amb Internet Explorer 9 o superior. Tot i que les cantonades arrodonides que falten, no van impedir que els usuaris puguessin llegir el vostre contingut, és possible que els usuaris de navegadors antics puguin viure sense ells.

Ara és molt més senzill - simplement feu servir la següent propietat:

border-radius: 20px;

Per posar una mida diferent de radi de vora en diferents cantonades, podeu especificar dos, tres o quatre valors, més aviat com ho podeu fer amb padding i margin:

/* 1st value is top left and bottom right corners,
   2nd value is top right and bottom left  */
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
   and bottom left, 3rd value is bottom right  */
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;

Com a últim punt, també podeu crear cantonades el·líptiques (on el radi x és diferent del radi y). Els dos radis diferents s'especifiquen separats per una barra inclinada (/), i podeu combinar això amb qualsevol combinació de valors, com s'ha indicat anteriorment. Per exemple:

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

Nota: Podeu utilitzar qualsevol unitat de longitud per especificar radis de vora, p. ex. píxels, rems, percentatges.

Nota: Les propietats no abreujades també estan disponibles, per establir el radi de vora de cada cantonada de la caixa de manera individual border-top-left-radius, border-top-right-radius, border-bottom-left-radius i border-bottom-right-radius.

Aprenentatge actiu: Jugar amb radis de vora

Per a aquest aprenentatge actiu, volem que implementeu diferents tipus de radi de vora en l'element proporcionat. Intenteu afegir:

  • La mateixa cantonada arrodonida a cada cantonada.
  • La mateixa cantonada el·líptica a cada cantonada.
  • Una cantonada arrodonida i el·líptic diferent a cada cantonada.
  • Cantonades arrodonides a cada cantonada usant la sintaxi de tres valors.
  • Una cantonada arrodonida a la cantonada inferior esquerra.
  • Cantonades arrodonides amb valors unitaris diferents, per veure com es comporten. Els percentatges són interessants - perquè?

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset.

Imatges de vora

Finalment, analitzem l'addició més recent (i complexa) a CSS per a la manipulació de les vores - border-image. La idea aquí és que, de vegades, crear una característica d'interfície d'usuari complexa requereix un disseny complex per a la vora, no només un color sòlid. Això possiblement podria ser creat per la superposició d'un element just al centre de la part superior d'un altre element més gran, i aplicar una imatge de fons per a l'element inferior, fingint una vora complexa. O en casos extrems, fins i tot podria haver de crear una graella de 3 x 3 de nou elements, amb l'element central com el vostre contingut i els vuit elements que l'envolten tenint els elements de vora aplicats.

Les imatges border-image fan que sigui molt més senzill d'aconseguir vores complexes, encara que en navegadors moderns (Internet Explorer 11+ ho suporti, així com altres navegadors moderns). Mirem com funciona això.

En primer lloc, heu de tenir una imatge per aplicar al vostre navegador. Això normalment serà un disseny de quadrícules 3 x 3, 4 x 4, 5 x 5 (etc.), com el següent:

Quan aquesta imatge s'utilitza per a la imatge de la vora, el navegador divideix la imatge en 8 parts, com indica la següent imatge:

Les imatges de la cantonada s'insereixen a les cantonades de la vora i s'utilitzaran els talls superior, dreta, inferior i esquerra per emplenar els costats corresponents de la vora (estirant-se o repetint-se). Hem de dir-li al navegador que els talls tinguin la mida adequada: aquesta imatge - per exemple, és de 160px i una quadrícula de 4 x 4, de manera que cada tall haurà de ser de 40px.

Per començar, necessitem una caixa per aplicar la vora. Aixó necessita tenir una vora especificada, en cas contrari la imatge de la vora no tindrà cap espai per aparèixer. També farem servir background-clip perquè qualsevol color de fons només ompli l'àrea sota el contingut i el farcit , i tampoc es pot estendre sota la vora (potser no ho vulgueu per al vostre disseny, però és útil en casos com aquest).

border: 30px solid black;
background-clip: padding-box;

Nota: Sempre haureu d'incloure una definició border al costat de qualsevol ús de border-image - això actua com una alternativa en cas que no es pugui mostrar la imatge de la vora , per exemple, si el navegador no admet la funció.

A continuació, farem servir border-image-source per especificar la imatge d'origen que s'utilitzarà com a imatge de la vora. Això funciona exactament igual que background-image, podent acceptar una funció url() o un degradat com a valor.

border-image-source: url(border-image.png);

Ara utilitzarem border-image-slice per establir la mida necessària dels talls, tal com s'ha descrit anteriorment:

border-image-slice: 40;

Aquesta propietat pot tenir un valor si totes els talls són de la mateixa mida, o bé si hi ha diversos valors si els talls necessiten tenir mides diferents, de la mateixa manera que padding i margin:

  • Dos valors: Superior i inferior, esquerra i dreta.
  • Tres valors: Superior, esquerra i dreta, inferior.
  • Quatre valors: Superior, dret, inferior, esquerre.

Si la imatge és un gràfic ràster (com ara un .png o .jpg), el número s'interpretarà en termes de píxels. Si la imatge és un gràfic vectorial (com un .svg), el número s'interpretarà com a coordenades en el gràfic. També es poden utilitzar percentatges (amb la unitat %). Consulteu la pàgina border-image-slice per obtenir més opcions i detalls.

Nota: Per defecte, el novè tall - la peça central - s'omet completament, i el contingut de l'element apareix en el buit que queda. Si desitgeu deixar el centre de la imatge de la vora, podeu fer-ho incloent-hi la paraula clau fill al final del seu valor border-image-source, en aquest cas s'estira per encaixar amb l'àrea de fons.

Finalment, utilitzarem border-image-repeat per especificar com volem que les imatges omplin els costats de la vora. Les opcions són:

  • stretch: El valor predeterminat; les imatges laterals s'estenen per omplir les vores. Això generalment es veu terrible i està pixelat, per tant no es recomana.
  • repeat: Les imatges laterals es repeteixen fins que s'omplen les vores. Depenent de les circumstàncies, això podria ser correcte, però ens podem quedar amb fragments d'imatge no estètiques.
  • round: Les imatges laterals es repeteixen fins que s'omplen les vores, i totes s'estiren lleugerament perquè no apareguin fragments.
  • space: Les imatges laterals es repeteixen fins que s'omplen les vores i s'afegeix una petita quantitat d'espaiat entre cadascuna de les còpies de manera que no apareguin fragments. Aquest valor només és compatible amb Safari (9+) i Internet Explorer (11+).

Hem decidit anar amb el valor arrodonit, ja que sembla ser el més útil i flexible:

border-image-repeat: round;

Posant tot això junt

Posem tot aquest codi junt per mostrar un exemple de treball. En primer lloc, algun HTML senzill:

<div>
  <p>Border image</p>
</div>

Ara, el nostre CSS:

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}

Aquest és el resultat:

Alguna cosa interessant que haureu tingut en compte és que la vora s'ha fixat a 20px d'amplada, mentre que els talls de la imatge són de 40 - en aquest cas, el navegador només canvia el tamaño dels talls a 20px d'amplada, de manera que encaixi.

Podeu trobar aquest exemple com border-image.html a Github (vegeu també el codi font). Feu una còpia local i teniu un joc.

Altres propietats

Les dues propietats d'imatge de vora menys utilitzades són les següents:

  • border-image-width: Només canvia la mida de la imatge de la vora , no la vora - si aquesta és més petita que  border-width, es col·locarà en la part exterior de la vora, no omplint-la. Si és més gran, s'expandirà més enllà de la vora i començarà a superposar-se al farciment/contingut.
  • border-image-outset: Defineix la mida d'una capa extra d'espai entre l'interior de la vora i el farciment - tipus de "farciment de la vora". Aquesta és una manera senzilla de moure la imatge de la vora una mica si ho desitjeu.

Abreujat

Com podeu esperar, hi ha una propietat abreujada disponible, border-image, que us permet establir tots els valors relacionats en una sola línia. Les següents línies:

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

Es pot reemplaçar per aquest:

border-image: url(border-image.png) 40 round;

Resum

Ara entens les vores, veritat? No les que estan a les vores del vostre país, sinó les que hi ha a les vores dels vostres elements. Les vores són útils per entendre i tenen molts usos diferents. En l'article següent, seguirem un pas endavant i explorarem les millors pràctiques per dissenyar taules - això us mostrarà una aplicació útil d'algunes de les tècniques que hem observat fins ara en el mòdul.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,