在网页设计时，页面中圆角的实现一直是个很难解决的问题，虽然现在有很多种实现方法，但都是比较麻烦的，这里想通过此例介绍一种CSS新技术，即CSS新的属性border-radius来实现网页设计中的图片的圆角化。

【操作步骤】

第1步，启动Dreamweaver，新建文档，保存为index.html。

第2步，首先构建网页结构，网页结构非常简单，就是在网页添加了4张图片。

<img class="a" src="images/1.jpg"/>

<img class="a" src="images/2.jpg"/>

<img class="a" src="images/3.jpg"/>

<img class="a" src="images/4.jpg"/>

第3步，定义网页的基本属性。

body {    margin: 20px;    padding: 20px;}

在以上的代码中设置了网页四周的补白为20px，用padding了网页的内边距为20px，设置为居中。

第4步，运用border-radius属性设置圆角图片。

.a {    

width: 150px;    

height: 150px;    

border: 1px solid gray;    

-moz-border-radius: 10px;      /*仅Firefox支持，实现圆角效果*/    

-webkit-border-radius: 10px;   /*仅Safari，Chrome支持，实现圆角效果*/    

-khtml-border-radius: 10px;    /*仅Safari，Chrome支持，实现圆角效果*/    

border-radius: 10px;           /*Firefox，Opera，Safari，Chrome支持，实现圆角效果*/}

在以上代码中，首先定义了图片的宽度和高度，接着设置了图片的边框样式，然后用border-radius定义了图片的圆角。

提示：border-radius属性的作用分别如下。   

•最多可以设置4个值，分别是矩形4个圆角的半径，如border-radius:10px，表示4个角都为圆角，且每个圆角的半径都为10px。   

•也可以设置两个值，如border-ra-dius:10px 5px，第1个值代表左上圆角和右下圆角，第2个值代表右上圆角和左下圆角。   

•如果设置3个值，如border-radius:10px5px 1px，第1个值代表左上圆角，第2个值代表右上圆角和左下圆角，第3个值代表右下圆角。   上圆角、右上圆角、右下圆角和左下圆角。   

•也可以将4个角拆分成4个单独的属性来设置：左上圆角：border-top-left-radius、右上圆角：border-top-right-radius，右下圆角：border-bottom-right-radius，左下圆角：border-bottom-left-radius。如IE8及其以下版本浏览器就不能支持这种技术，所以在使用它的时候还要考虑到浏览器的兼容问题。

•如果设置了4个值，如border-ra-dius:10px 9px 8px 7px，4个值分别代表左上圆角、右上圆角、右下圆角和左下圆角。   

•也可以将4个角拆分成4个单独的属性来设置：左上圆角：border-top-left-radius、右上圆角：border-top-right-radius，右下圆角：border-bottom-right-radius，左下圆角：border-bottom-left-radius。如IE8及其以下版本浏览器就不能支持这种技术，所以在网页设计的时候还要考虑到浏览器的兼容问题。