跟高老师学习Web前端之43.

光.影

       使用二代身份证已经十年了，时光真如白驹过隙！今天我去办理新的身份证，看着照片上那张稚嫩的面孔不免感慨万千，那时候大学二年级，多年轻啊。如今，又一个新的十年要开始了！眼下的时光何其珍贵，读书、学习、健身、早起、写计划，自律自强，一步一步活成自己想要的样子！

       今天我学习了border-radius属性，即圆角的设置。圆角的属性值用数值或百分比设置，且不能为负值。

代码书写

页面展示

        圆角属性值的设置，存在以下特点：当圆角属性为一个值时，则该属性值作用于全部的四个角；当圆角属性为两个值时，则第一个值代表上左和下右，第二个值代表上右和下左属性；当圆角属性为三个值时，分别表示上左、上右和下左、下右的属性，当圆角值为四个值时，则一次代表上左，上右，下右，下左的属性。以下是举例：

圆角属性：两个值

圆角属性：三个值

圆角属性四个值

        圆角设置有不同的半径类别，可以依据页面需求设计不同的特效。以下为：当水平半径和垂直半径相同时、水平半径和垂直半径不同时的页面效果。当水平半径和垂直半径不同时，数值之间用左斜杠分开，比如25%/15%，表示水平圆角半径为25%，垂直圆角半径为15%。

代码书写

页面展示

      当圆角值为100px或者50%时，页面为圆形。在页面特效制作时，经常会用到。

圆角值为100px

         晚安！