开发者学堂课程【CSS 快速掌握：圆角矩形案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9211
圆角矩形案例
内容介绍
一、圆角矩形
二、圆形图片
一、圆角矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角矩形案例</title>
<style type="text/css">
body{background-color:#ccc;}
.moref
width:60px;
height:20px;
background-color:#fff;
text-align:center;
Line-height:20px;
margin:100px auto;
/*圆角矩形椭圆形*/
border-radius:1Øpx;
font-size:12px;
font-family:"微软雅黑";}
a{display:block;
width:60px;
height:20px;
border-radius:1Øpx;}
a:link,a:visitedf{
color:#000（颜色）；
text-decoration:none;}
.more a:hover{
background-color:#fØØ;
color:#fff;}
</style>
</head>
<body>
<div class=”more”><a href=”#”>更多</a></div>
</body>
</html>
二、圆形图片
<title>圆形图片</title>
<style type="text/css">
img{
width:200px;
height:200px;
border-radius:50%;}
</style>
</head>
<body>
<img src="./images/face.jpg">
</body>
</html>
