Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right bottom left. Ejemplos (CU01026D)
Aquí esta mi código para el ejercicio CU01026D del tutorial de desarrollo web desde cero, esta vez lo hice en un solo archivo HTML usando etiquetas style:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bordes en CSS(CU01026D)</title>
<style type="text/css">
/*Parrafos*/
p{font-size: 1.5em;}
/*titulos*/
h1.titulo{border-style: double; border-color: #000; border-width: 3px;
background-color: rgba(255, 106, 0, 0.5);}
/*divisiones*/
div{border-width: 10px; border-color: #000000; width: 1000px}
div#divi1{border-style: none;}
div#divi2{border-style: hidden;}
div#divi3{border-style: solid;}
div#divi4{border-style: double;}
div#divi5{border-style: dotted;}
div#divi6{border-style: dashed;}
div#divi7{border-style: groove; border-color: darkgray;}
div#divi8{border-style: ridge; border-color: darkgray;}
div#divi9{border-style: outset; border-color: darkgray;}
div#divi10{border-style: inset; border-color: darkgray;}
/*FIN divisiones*/
</style>
</head>
<body>
<h1 class="titulo">TIPOS DE BORDES</h1>
<div id="divi1"><p>Borde none</p></div><br><br>
<div id="divi2"><p>Borde hidden</p></div><br><br>
<div id="divi3"><p>Borde solid</p></div><br><br>
<div id="divi4"><p>Borde double</p></div><br><br>
<div id="divi5"><p>Borde dotted</p></div><br><br>
<div id="divi6"><p>Borde dashed</p></div><br><br>
<div id="divi7"><p>Borde groove</p></div><br><br>
<div id="divi8"><p>Borde ridge</p></div><br><br>
<div id="divi9"><p>Borde outset</p></div><br><br>
<div id="divi10"><p>Borde inset</p></div><br><br>
</body>
</html>
Tema: HTML y CSS. Tipos de borde punteados, dobles, con puntos, efecto 3D. CU01026D (Leído 2064 veces)
RSS -
WAP2