<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilo ccs3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="inicio">
<span id="titulo">Estilos CSS</span>
</header>
</body>
</html>
Y ahora un documento en CSS.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
No hemos introducido nada nuevo, solo los estilos necesarios para formar una cabecera y crear una caja posicionada en el centro de la ventana.
Aplicamos la propiedad border-radius de CSS3.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
border-radius: 20px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Si las esquinas son del mismo valor, podemos declarar solo un valor para la propiedad.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
border-radius: 20px 10px 30px 50px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Se puede trabajar con solo dos valores.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
border-radius: 20px 10px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Esto es todo sobre la propiedad border-radius.
No hay comentarios:
Publicar un comentario