CSS 圆角
2018-12-08 本文已影响8人
roy_pub
border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.border_one {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 20px;
display: inline-block;
border: 2px solid red;
}
.border_two {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
display: inline-block;
border: 2px solid red;
}
.border_thr {
width: 100px;
height: 100px;
background-color: green;
border-radius: 50% 0 50% 0;
display: inline-block;
border: 2px solid red;
}
.border_fou {
width: 100px;
height: 100px;
background-color: greenyellow;
border-radius: 20px 0 0 20px;
display: inline-block;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="border_one"></div>
<div class="border_two"></div>
<div class="border_thr"></div>
<div class="border_fou"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {
background-color: rgba(0,0,0,0.5);
height: 200px;
}
a {
display: inline-block;
width: 100px;
height: 100px;
background-color: white;
text-align: center;
line-height: 100px;
text-decoration: none;
margin: 50px;
border-radius: 50%;
color: pink;
}
a:hover {
color: white;
background-color: pink;
}
</style>
</head>
<body>
<div>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</div>
</body>
</html>
