本文介绍如何使用 CSS 设置背景(或背景图片)为圆角。
实现的原理是创建一个div,然后设置div的边框属性border-radius为50%,既可以实现。
示例、创建圆角div:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
<title>设置背景圆角</title>
<style type="text/css">
/*正常div*/
.box0 {
background-color: red;
width: 200px;
height: 200px;
}
/*圆角div*/
.box1 {
background-color: gold;
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box0"></div>
<div class="box1"></div>
</body>
</html>
以上代码效果如下(黄色圆形即为实现的圆角):
以上示例,设置的是背景色background-color,我们也可以将背景色修改为背景图片。