看图独立写代码-CSS边框样式的编写

Original 2019-01-13 01:58:55 251
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1月13日css作业</title><meta name="keywords" content="1月13日css作业"><meta na

<!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>



Correcting teacher:天蓬老师Correction time:2019-01-13 09:18:01
Teacher's summary:border-width: 20px; 这样写不是很多的, 试试: border: 20px;

Release Notes

Popular Entries