摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>边框</title> <!-- <li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<!-- <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/index.css"> -->
<style type="text/css">
.box{width: 100px;height: 100px;border: 1px /*solid*实线//*double*双线//*dashed虚线*//* dotted 点状虚线*/ solid #ccc;border-radius:/*10px*/50px/*圆角度数*/;}
.main{width:1000;height:100px;border-top:1px solid red;background:#ccc;border-left:1px solid red;border-right:1px solid red;}
button{border:none;}/*清除自带边框*/
.shadow{width:300px;height:40px;box-shadow:/*1*/0px/*(x轴)*/ 5px/*(y轴)*/ /*3*/20px/*(阴影的宽度)*/ #ccc /*inset*//*(内部阴影)*/;/*border:1px solid #ccc;*/}
</style>
</head>
<body>
<div class="box"></div>
<div class="main"></div>
<button>登录</button>
<div class="shadow"></div><!-- 可用来做圆柱的效果 -->
</body>
</html>
批改老师:灭绝师太批改时间:2018-11-28 09:03:47
老师总结:完成的不错!后面的学习会带你完成更精彩的效果!