Homework4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
要求
(1)所有div标签的宽度和高度均设置为300px。
(2)第一个div满足:
四条边的宽度为10px;
上右下左四条边的样式依次为:solid dotted inset dashed;
上下两条边的颜色为blue,左右两条边的颜色为red;
外边框圆角半径为50%;
(3)第二个div满足:
四条边的样式为:solid 3px black;
外边框圆角半径为10px;
实现:
css部分:
div {
width: 300px;
height: 300px;
}
div:first-of-type {
border-width: 10px;
border-style: solid dotted inset dashed;
border-color: blue red blue red;
border-radius: 50%;
}
div:nth-of-type(2) {
border-style: solid;
border-width: 3px;
border-color: black;
border-radius: 10px;
}
html+css所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>homework4</title>
<style>
div {
width: 300px;
height: 300px;
}
div:first-of-type {
border-width: 10px;
border-style: solid dotted inset dashed;
border-color: blue red blue red;
border-radius: 50%;
}
div:nth-of-type(2) {
border-style: solid;
border-width: 3px;
border-color: black;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
成果:
css1-5均已更新