美文网首页WEB前端程序开发程序员
跟高老师学习Web前端之43.

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

作者: 火色石榴花 | 来源:发表于2017-01-11 19:04 被阅读0次
    光.影

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

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

    代码书写 页面展示

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

    圆角属性:两个值 圆角属性:三个值 圆角属性四个值

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

    代码书写 页面展示

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

    圆角值为100px

             晚安!

    相关文章

      网友评论

        本文标题:跟高老师学习Web前端之43.

        本文链接:https://www.haomeiwen.com/subject/tdvrbttx.html