Css 2 borders

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Borders

Pune in evidenta bordura elementului, de regula de tip block. Bordura este linia care se afla intre zona Margin si zona Padding.
1.Toate setarile intr-o singura declaratie:

<html>
<head>
<style>
p
{
border: medium dublu rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>

2. Setarea bordurilor diferentiat

<html>
<head>
<style>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>

<body>
<p>Solid sus si jos double in lateral</p>
<p>double sus si jos solid in lateral</p>
<p>Some text</p>
<p>solid sus double in lateral stanga dreapta si groove jos</p>
</body>
</html>

3. Toate setarile pentru bordura superioara intr-o singura declaratie

<html>
<head>
<style>
p
{
border-top: medium solid #ff0000
}
</style>
</head>

<body>
<p>Some text.</p>
</body>
</html>
la fel se procedeaza si pentru border-right, border-bottom, border-left
Realizati exemplul de mai sus pentru una dintre borduri

4. Setarea stilurilor pentru toate bordurile

<html>
<head>
<style>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p>A dotted border</p>
<p>A dashed border</p>
<p>A solid border</p>
<p>A double border</p>
<p>A groove border</p>
<p>A ridge border</p>
<p>An inset border</p>
<p>An outset border</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-style, border-right-style, border-bottom-style, border-left-style
Realizati exemplul de mai sus pentru una dintre borduri

5. Setarea grosimii tuturor bordurilor intr-o singura declaratie:

<html>
<head>
<style>
p.one{
border-style: solid;
border-width: 5px}
p.two {
border-style: solid;
border-width: thick}
p.three{
border-style: solid;
border-width: 5px 0px}
p.four {
border-style: solid;
border-width: 5px 10px 1px}
p.five {
border-style: solid;
border-width: 5px 10px 1px medium}
</style>
</head>

<body>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-width, border-right-width, border-bottom-width, border-left-width
Realizati exemplul de mai sus pentru una dintre borduri

6. Setarea culorilor pentru toate bordurile

<html>
<head>

<style>
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>

<body>
<p>One-colored border!</p>
<p>Two-colored border!</p>
<p>Three-colored border!</p>
<p>Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
La fel se procedeaza si pentru fiecare latura in parte: border-top-color, border-right-color, border-bottom-color, border-left-color