Bisel exterior con CSS
Cómo aplicar un efecto de bisel en una capa?.Para los que recién se inician en CSS o para los que necesitan refrescar la memoria; las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.
Para lograr que el efecto funcione hay que definir algunas propiedades:
* Position
* Background
* Width
* Top
* Left
Position contendrá el valor "relativo" que nos permitirá cambiar el valor de Top y Left.
Background será definido en dos oportunidades y contendrá el color de base y el color de sombra.
Width contendrá el ancho de la capa.
Top y Left serán definidos en dos oportunidades y contendrán los valores de posición de la capa base y capa sombra
Para lograr el bisel exterior puedes copiar el siguiente ejemplo:
<html>
<head>
<style type="text/css">
body {background:#626262}
#sombra {position:relative; background:black; width:100%; top:-1px; left:1px}
#base {position:relative; background:#D7D7D7; top:-1px; left:-1px;}
</style>
</head>
<body>
<div id="sombra">
<div id="base">
</div>
</div>
</body>
</html>