Ejemplo 3

									
									
									body {
										text-align:center;
									}
									#principal {
										display:block;
										width:500px;
										margin:50px auto;
										padding: 15px;
										text-align:center;
										
										border:29px solid ;
										border-image: url("imagen.jpg") 30 2 repeat;
										/*border-image-source: url("imagen.jpg")
										border-image-slice:30;
										border-image-repeat:repeat;
										border-image-width:1 1 1 1;
										text-align:justify;*/
										
										/*background:linear-gradient( posicion a la que va (to right, 90deg), color inicio,color final)*/
										/*background:radial-gradient(color inicio,color final)*/
										background: linear-gradient( to right, red 60%, gold 90%);
										
										/*border-radius:10px; da un borde redondeado,2 valores,
										esquinas en diagonal;4 valores esquinas en sentido agujas del reloj; 10px/40px redondeo tipo elipse*/ 
										border-radius: 10px 40px;
										
										/*box-shadow:color offset-x offset-y blur-radius spread-radius inset;*/
										box-shadow: rgb(150,150,150) 5px 5px 10px;
										
										/*text-shadow:*/
										text-shadow: rgba(250,250,150,.5) 3px 3px 2px;
										outline:2px dashed #004449;
										outline-offset:15px;
										
										/*herramientas transform
										transform:scale(0.7,-0.5);
										transform:rotate(25deg);
										transform:skew(20deg);
										transform:translate(50px,30px);*/
										
										transform: skew(20deg) scale(0.7,0.7) rotate(25deg) translate(50px,30px);
									}
									#principal:hover{
										transform:rotate(-15deg);
										/*herramienta transition:propidad-css duración tiempo retardo ;*/ 
										transition:transform 1s ease 0.5s;
									}
									#titulo {
										font: bold 36px verdana,sans-serif;

									}