聊代码（第四十九集）css样式（之十九）
在本集，说说圆角代码，不同的参数设置可以获得圆角矩形，正圆形和椭圆形。
圆角矩形效果：
圆角矩形代码：
＜div align="center"＞
＜style type="text/css"＞.圆角矩形 { width: 600px; height: 380px; background: url(http://img2.oldkids.cn/upload/260811000/u260810070/2016/01/
10/blog_20160110131519891999.gif) no-repeat; border-radius: 30px; }
＜/style＞
＜div class="圆角矩形"＞ ＜p＞＜img src="http://img3.oldkids.cn/upload/260811000/u260810070/2016/11/
20/blog_20161120152134608600.gif" style="width:550px; height:380px;" /＞＜/p＞ ＜/div＞ ＜/div＞
正圆形效果：
正圆形代码：
＜div align="center"＞
＜style type="text/css"＞.正圆轮廓 { width: 440px; height: 440px; margin:30px; background: url(http://img3.oldkids.cn/upload/260811000/u260810070/2016/01/
15/blog_20160115115121550106.gif) no-repeat; border: 10px solid black; border-style: solid; border-color: green; filter:alpha(opacity=100); opacity:0.6; border-radius: 50%; }
＜/style＞
＜/span＞＜/p＞
＜div class="正圆轮廓"＞
＜p＞＜img src="http://img4.oldkids.cn/upload/260811000/u260810070/2016/11/
20/blog_20161120155355231113.gif" style="width:400px; height:380px;" /＞＜/p＞
＜/div＞ ＜/div＞
椭圆形效果：
椭圆形代码：
＜div align="center"＞
＜style type="text/css"＞
.椭圆轮廓 { width: 600px; height: 430px; margin:10px; background: url(http://img2.oldkids.cn/upload/260811000/u260810070/2016/01/
11/blog_20160111180541159986.gif) no-repeat; border: 10px solid black; border-style: solid; border-color: green; filter:alpha(opacity=100); opacity:0.9; border-radius: 50%; }
＜/style＞
＜/span＞＜/p＞
＜div class="椭圆轮廓"＞
＜p＞＜img src="http://img4.oldkids.cn/upload/260811000/u260810070/2016/11/
20/blog_20161120123847277874.gif" style="width:500px; height:400px;" /＞＜/p＞
＜/div＞ ＜/div＞
对圆角半径代码的说明：
border-radius: 30px;表示四个角的圆角半径相同，都是30px。
border-radius: 15px 5px;第一值为左上角和右下角圆角半径，第二值为右上角和左下角圆角半径。
border-radius: 15px 5px 25px;第一值为左上角圆角半径，第二值为右上角和左下角圆角半径，第三值为右下角圆角半径。
border-radius: 15px 5px 25px 10px;依次表示左上角，右上角。右下角，左下角圆角半径。
正圆形的圆角半径须设置为 50%（图形宽高要相等）。椭圆形的圆角半径亦须设置为 50%。
海 特 行 者 欢 迎 你 ！
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
