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.