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

版权所有:全国高校教师网络培训中心

技术支持:北京畅想数字教育科技股份有限公司

联系地址:北京市西城区德外大街4号院A座2层

咨询电话:400-6699-800

京ICP备08008005号 京公网安备110102004467