轮廓和阴影
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓和阴影title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: #87CEEB;
margin: 50px auto;
/*
轮廓
轮廓就是不占空间的边框，设置轮廓不会影响元素的布局
*/
outline: 5px red solid;
/*
阴影
box-shadow用来设置元素的阴影，和轮廓一样，阴影也不会影响页面的布局
box-shadow值
inset内部阴影
第一个值，阴影的水平偏移量
正值向右移动，负值向左移动
第二个值，阴影的垂直偏移量
正值向下移动，负值向上移动
第三个值，阴影的模糊半径
第四个值，阴影的颜色
*/
/* box-shadow: inset 10px 10px 30px #000000; */
/* box-shadow:inset -10px 20px 5px #000000; */
box-shadow: 20px 20px 20px rgba(0,0,0,.5);
}
style>
head>
<body>
<div class="box">div>
body>
html>