CSS border (frontiera, chenar, bordura)
CSS Tutorial » Bordes CSS (frontiera, chenar, bordura)
Definiția frontierelor CSS.
Proprietățile chenarului CSS vă permit să definiți zona chenarului unui element.
Marginile apar direct între marginea și umplerea unui element. Bordura poate fi un stil predefinit, cum ar fi, linie continuă, linie punctată, linie dublă etc. sau o imagine.
și o margine galben de 25px.
Stil de bordură CSS
La propiedad de estilo de borde puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted; border-color:#00F}
p.dashed {border-style: dashed; border-color:#00F}
p.solid {border-style: solid; border-color:#00F}
p.double {border-style: double; border-color:#00F}
p.groove {border-style: groove; border-color:#00F}
p.ridge {border-style: ridge; border-color:#00F}
p.inset {border-style: inset; border-color:#00F}
p.outset {border-style: outset; border-color:#00F}
p.none {border-style: none; border-color:#00F}
p.hidden {border-style: hidden; border-color:#00F}
p.mix {border-style: dotted dashed solid double; border-color:#00F}
</style>
</head>
<body><h2>Proprietatea în stilul chenarului</h2>
<p>Această proprietate specifică ce tip de chenar trebuie afișat:</p><p class="dotted">O bordura punctată O bordura mixtă.</p>
<p class="dashed">O bordura punctată.</p>
<p class="solid">O bordura solidă.</p>
<p class="double">O bordura dubla</p>
<p class="groove">O bordura groove.</p>
<p class="ridge">O bordura de creastă.</p>
<p class="inset">O bordura inserată.</p>
<p class="outset">O frontieră inițială.</p>
<p class="none">Fara chenar.</p>
<p class="hidden">O bordura ascunsă.</p>
<p class="mix">Un chenar mixt.</p></body>
</html>
Etichete: chenare CSS, raza chenarului, culoarea chenarului, dimensiunea chenarului, generatorul chenarului, marginea fundalului CSS, marginea rotunjită CSS, umbra bordurilor CSS, stenograma frontierei
Setarea lățimii chenarului CSS
Proprietatea lățimii chenarului specifică lățimea zonei chenarului. Aceasta este o proprietate de prescurtare pentru setarea în același timp a grosimii tuturor celor patru laturi ale chenarului unui element.
<!DOCTYPE html>
<html lang = "ro">
<head>
<meta charset = "utf-8">
<title> Proprietatea lățimii chenarului CSS </title>
<style>
p {
border-style: solid;
padding: 20px;
margin: 20px; border-color: #039
}
p.one {
border-width: 6px;
}
p.two {
border-width: 6px 12px;
}
p.three {
border-width: 6px 12px 16px;
}
p.four {
border-width: medium 12px thick 16px;
}
</style>
</head>
<body>
<p class = "one"> <strong> sintaxa unei valori: </strong>
valoarea unică setează lățimea tuturor celor patru laturi ale chenarului. </p>
<p class = "two"> <strong>sintaxă cu două valori: </strong>
prima valoare setează lățimea marginii de sus și de jos, în timp ce
a doua valoare setează lățimea marginii laturilor stânga și dreapta. </ p>
<p class = "three"> <strong> sintaxă cu trei valori:
</strong> prima valoare setează lățimea marginii superioare,
a doua valoare stabilește lățimea marginii stânga și dreapta și
a treia valoare setează lățimea marginii de jos. </p>
<p class = "four"> <strong>sintaxă cu patru valori:
</strong> fiecare valoare setează lățimea chenarului individual
în ordinea sus, dreapta, inferioară și stânga. </p>
</body>
</html>
Specificați culoarea chenarului CSS
Proprietatea border-color specifică culoarea zonei border. Aceasta este, de asemenea, o proprietate de prescurtare pentru setarea culorii celor patru laturi ale chenarului unui element.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Proprietatea de culoare a chenarului CSS</title>
<style>
p {
border-width: 15px;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}
</style>
</head>
<body>
<p class="one"><strong>one-value syntax:</strong>
valoarea unică setează culoarea celor patru laturi ale chenarului.</p>
<p class="two"><strong>two-value syntax:</strong>
prima valoare setează culoarea marginii de sus și de jos,
în timp ce a doua valoare stabilește culoarea marginii laturilor
dreapta și stânga.</p>
<p class="three"><strong>three-value syntax:</strong>
prima valoare setează culoarea chenarului superior, a doua valoare setează
culoarea chenarului drept și stâng, iar a treia valoare setează culoarea
de la bordura inferioară.</p>
<p class="four"><strong>four-value syntax:</strong>
fiecare valoare setează culoarea chenarului individual în cea mai înaltă ordine,
dreapta, jos și stânga.</p>
</body>
</html>
CSS, border-radius
border-color
border size
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.