开发者学堂课程【零基础学前端 HTML+CSS：圆角】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5150
圆角
内容介绍
一、圆角的介绍
二、设置圆角边框操作示例
一、圆角的介绍
//可以使用图像做一个边框的背景。圆角需要 CSS3 来实现。
1、个性化边框
#CSS3 新增三个边框属性
#Border-radius 圆角边框#Box-shadow 边框阴影#Border-image 图片边框#IE9+ 支持圆角和阴影
2、浏览器支持：
（1）borer-radius：
（2）box-shadow :
（3）border-image:
3、圆角边框
#div{border:2px solid;
#border-radius:25px; //圆角角度#-moz-border-radius:25px; /*Old Firefox*/#-webkit- border – radius:25px; /*添加WEBKIT支持*/#border-top-left-radius:2em;
#border-top-right-radius:2em;
#border-bottom-right-radius:2em;
#border-bottom-left-radius:2em;
二、设置圆角边框操作示例
1、示例代码：
#color{
width:500px;
height:500px;
background-color:rgb(255,0,0);
}
#color2{
width:500px;
height:500px;
background-color:rgb(255,0,0.5);
}
.imagcolor{
opacity:0.5;
}
.linear{width:200px;
height:60px;
background:linera-gradient(#000000,#cccccc,#ffffff);
}
#radius{
width:400px;
height:100px;
background:linear-gradient(#000000,#ccccccc);
border:1px #222222 solid;
border-radius:150px; //增加圆角角度
}
<div id=”color”>
</div>
<div id=”color2”><img src=”images\Penguins.jpg” class=”radius2>
<div id=”linear”>点击我</div>
<div id=’radius’>圆角边框</div>
2、呈现效果如下：
//如果设置了圆角角度，没有实现效果，则要检查是否加入兼容代码。
//设置圆角角度可以让矩形的图像变成圆角
