摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css边框样式</title> <style type="text/css"> .box{height:&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css边框样式</title>
<style type="text/css">
.box{height: 100px;width: 100px;border: 1px solid #ccc;border-radius: 50px;}
.double{height: 100px;width: 100px;border: 5px double #ccc;}
.dashed{height: 100px;width: 100px;border: 5px dashed #ccc;}
button{border: none;}
/*box-shadow
第一个值是代表x轴,正数向右,负数向左;
第二个值代表Y轴
第三个值代表宽度
第四个值代表颜色
第五个值代表向内,默认向外*/
.shadow{height: 100px;width: 100px;box-shadow: -10px 5px 5px red inset;}
</style>
</head>
<body>
<div class="box"></div>
<div class="double"></div>
<div class="dashed"></div>
<button>登陆</button>
<div class="shadow"></div>
</body>
</html>
批改老师:查无此人批改时间:2019-03-06 09:15:13
老师总结:完成的不错,边框可以 让页面有层次感,要多练习不同的样式。继续加油。