>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
23. 圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 150px;
height: 150px;
background: pink;
margin: auto;
margin-top: 100px;
border-radius: 0px 0px 0px 0px ; /*top right bottom right*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
24. 伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.list li{
float: left;
width: 120px;
background: red;
text-align: center;
color:#fff;
margin-left: 20px;
position: relative;
}
.list li:after {
content: "";
border-top: 8px solid #fff;
border-left:8px dashed transparent;
border-right: 8px dashed transparent;
position: absolute;
right: 5px;
top: 8px;
}
</style>
</head>
<body>
<ul class="list">
<li>home</li>
<li>photo</li>
<li>exit</li>
</ul>
</body>
</html>
