- 网页中圆角边框的秘密 - 魔术表演:搜狐Logo形状变化 - 棱角分明的长方形变为圆形 - 圆角变化的实际应用 - HOW123影视网站:主板块为圆角矩形 - 别克专业店网站:团购中心板块采用特殊圆角 - 搜狐栏目页面:圆形图片吸引浏览者注意 - 圆角实现方法 - Photoshop处理的问题 - 圆角边缘不够光滑,可能出现瑕疵 - CSS3样式制作圆角 - 使用border-radius属性 - 示例:将方形图片处理为圆角效果 - 设置属性值为20像素 - 边缘光滑无瑕疵 - border-radius属性分析 - 指定一个圆角半径 - 单参数值表示四分之一圆 - 参数值越大,弧度越大 - 正方形素材设置半径为一半时显示为圆形 - 绘制四个不同圆角的边框 - 四个参数值分别控制四个角 - 两个参数值分别控制对角线上的两个角 - 单独设置某一个角的圆角效果 - 使用border-radius衍生属性 - 实际案例还原 - 圆形图片实现方法 - 原始正方形图片添加样式 - 设置border-radius为边长的一半 - 特殊形式圆角实现方法 - 左上角和右上角设置圆角半径 - 其他两个角设置为0 - 微课总结 - CSS3圆角边框的核心内容 - border-radius属性及其参数设置 - 衍生属性的应用 - 课后练习 - 利用border-radius属性制作圆角导航按钮