Mis códigos del ejercicio CU01026D del curso de desarrollo web con CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,cursos">
<meta name="description" content="Portal web">
<link rel="stylesheet" type="text/css" href="estilos30.css">
<title>Ejemplos CSS</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div><br/><br/>
<div id="b">div2</div><br/><br/>
<div id="c">div3</div><br/><br/>
<div id="d">div4</div><br/><br/>
<div id="e">div5</div><br/><br/>
<div id="f">div6</div><br/><br/>
<div id="g">div7</div><br/><br/>
<div id="h">div8</div><br/><br/>
<div id="i">div9</div><br/><br/>
<div id="j">div10</div><br/><br/>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Código CSS: "estilos30.css"
#a {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
border-color: red;
}
#body div {
border-width: 10px;
}
#b {
border-top-style: groove;
border-right-style: ridge;
border-bottom-style: inset;
border-left-style: outset;
border-color: green;
}
#c {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: hidden;
border-left-style: double;
border-color: blue;
}
#d {
border-top-style: dotted;
border-right-style: groove;
border-bottom-style: ridge;
border-left-style: hidden;
border-color: pink;
}
#e {
border-top-style: outset;
border-right-style: inset;
border-bottom-style: ridge;
border-left-style: hidden;
border-color: yellow;
}
#f {
border-top-style: dotted;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: double;
border-color: blue;
}
#g {
border-top-style: inset;
border-right-style: ridge;
border-bottom-style: dashed;
border-left-style: dotted;
border-color: red;
}
#h {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: outset;
border-color: green;
}
#i {
border-top-style: groove;
border-right-style: solid;
border-bottom-style: double;
border-left-style: hidden;
border-color: black;
}
#j {
border-top-style: dashed;
border-right-style: inset;
border-bottom-style: ridge;
border-left-style: solid;
border-color: brown;
}
No me funcionaron los selectores: "nth-child(númerodeelemento)" por lo tanto me vi obligado a utilizar los selectores:"#"
Tema: CSS efectos de borde punteados trazos tres dimensiones groove ridge CU01026D# (Leído 2189 veces)
RSS -
WAP2