看图独立写代码-CSS边框样式的编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1月13日css作业</title>
<meta name="keywords" content="1月13日css作业">
<meta name="description" content="1月13日css作业">
<meta name="author" content="lijinfu">
<link rel="shortcut icon" type="image/x-icon" href="http://xmn-xdm.com/img/favicon.ico">
<style type="text/css">
*{
margin: 0px;padding: 0px;
}
.square{
width: 800px;height: 800px;background: yellow;border: 15px solid green;
}
.square:hover{
border-color: black;
}
.redcircle{
width: 750px;height: 750px;background: red;border:1px solid red;border-radius: 375px;box-shadow: 10px 10px ;
margin-top: -800px;margin-left: 33px;
}
.whitedashed{
width: 680px;height: 680px;border:10px dashed white;border-radius: 340px;
margin-top: -720px;margin-left: 61px;
}
.whitedashed:hover{
border-color: #01fdee;
}
.doubleyellow{
width: 590px;height: 590px;border:5px double yellow;border-width: 20px;border-radius: 315px;
margin-top: -670px;margin-left: 95px;
}
.doubleyellow:hover{
border-color:#ff33ff;
}
p{
font-size: 50px;font-weight: bold;margin-top: -340px;margin-left: 250px;
}
p:hover{
color: white;
}
</style>
</head>
<body>
<div><!-- 正方形部分 --></div>
<div><!-- 红色圆形部分 --></div>
<div></div><!-- 白色虚线圆形部分 -->
<div></div><!-- 双黄线圆部分 -->
<p >1月13日作业</p>
</body>
</html>