Skapa en färgad kant runt texten med HTML och CSS

En gräns på dina HTML-sidor kan hjälpa till att uppmärksamma ett avsnitt av text eller omge något annat HTML-element.

Som kan ses nedan kan en gräns skapas runt vilken text som helst med hjälp av HTML och CSS på din webbsida. I exemplet nedan har vi omringat ett stycke () med en röd gräns.

Första exemplet med text omgiven av en röd kant.

Detta exempel har också flera linjer.

För att skapa ovanstående exempel användes underkoden.

Första exemplet med text omgiven av en röd kant.

Detta exempel har också flera linjer.

I ovanstående kod definierar stilen gränsstorleken (px kort för pixel), stiltyp och kantfärg. Stilen på gränsen är hur gränsen visas på skärmen. Andra typer av gränsstilar är prickade, streckade, dubbla, spår, ås, insats och början. Gränsfärgen definierar den färg du vill använda för gränsen. I ovanstående exempel användes färgkoden # FF0000, vilken är färgkoden för röd.

Definiera stil med CSS

Utseendet på element på en webbsida kan också definieras med inline CSS. Inline CSS definieras i ditt HTML-dokument, i elementet. Eller du kan definiera CSS i en extern fil, med .css- tillägget. Sedan kan du länka till den här filen från något HTML-dokument, och element i det dokumentet kommer att ha åtkomst till CSS-formaten. Till exempel, med den nedan angivna CSS-koden, skapas en ny klass som heter "borderexample" som kan tillämpas på någon annan HTML-tagg.

.borderexample {border-style: solid; border-color: # 287EC7; }

Med hjälp av ovanstående kod, om du vill tillämpa denna gränsstil i en HTML-paragraf, kan du skriva något som liknar exemplet nedan.

Här är ett exempel på en gräns som skapats med hjälp av CSS