HTML5第六课时，盒子阴影和outline

来源：互联网发布：知巳手机编辑：程序博客网时间：2024/05/16 12:18

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>盒子阴影和outline</title>    <style>        #div1{            width: 200px;            height: 200px;            background-color: #585858;            margin-bottom: 10px;            box-shadow: 5px 0 0 10px red;    /*box-shadow:x方向的偏移  y方向的偏移  模糊的程度  模糊的范围大小  颜色*/        }        #in:focus{            outline: none;/*去掉输入框当中，鼠标放在上面，框不变成蓝色*/

/*outline也可以改变属性，变成其他的颜色*/
        }        #div2{            width: 200px;            height: 200px;            margin-top: 10px;            background-color: #42668f;            outline: 3px solid #ff7300;/*边框线，跟border是一样的。*/        }    </style></head><body><div id="div1"></div><input id="in" type="text"  placeholder="请输入用户名"/><div id="div2"></div></body></html>

1 0