08使用CSS设计圆角图片

使用CSS设计圆角图片：

通过CSS新的属性border-radius来实现图片的圆角化。

设计步骤：

（1）构建网页结构。网页结构非常简单，仅仅是在网页中添加了4张图片。

（2）定义网页的基本属性。

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

（3）运用border-radius属性设置圆角图片。

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

结果如图所示。

 

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

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

*也可以设置两个值，如border-radius:10px5px；第1个值表示左上圆角和右下圆角，第2个值表示右上圆角和左下圆角。

*如果设置3个值，如border-radius：10px 5px 1px；第1个值表示左上圆角，第2个值表示右上和左下圆角，第3个值表示右下圆角。

*如果设置4个值，如border-radius：10px 9px 8px7px；4个值分别表示左上、右上、右下、左下。

*也可以将4个角拆分成4个单独的属性来设置，如左上圆角（border-top-left-radius）、右上（border-top-right-radius）、右下（border-bottom-right-radius）和左下圆角（border-bottom-left-radius）。

 

目前有些浏览器还不支持它。如IE8及其以下版本的浏览器就不能支持这种技术，所以在使用border-radius属性时，还要考虑到浏览器的兼容性问题。