乐鱼电竞

    • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    盒子模型的圆角边框怎样实现？

    更新时间:2021年01月21日16时37分 来源:乐鱼电竞 浏览次数:

    在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。border-radius属性基本语法格式如下。

    border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

    在上面的语法格式中，水平和垂直半径参数均有4个参数值，分别对应着矩形的四个圆角（每个角包含着水平和垂直半径参数），如图1所示。border-radius的属性值主要包含2个参数，即水平半径参数和垂直半径参数，参数之间用“/”隔开，参数的取值单位可以为px(像素值)或%(百分比)。

    1611217549819_1.png

    图1 参数所对应的圆角

    border-radius属性同样遵循值复制的原则，其水平半径参数和垂直半径参数均可以设置1~4个参数值，用来表示四角圆角半径的大�。咛褰馐腿缦�。

    ● 水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同；

    ● 水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径，具体示例代码如下。

    img{border-radius:50px 20px/30px 60px;}

    在上面的示例代码中设置图像左上和右下圆角水平半径为50px，垂直半径为30px，右上和左下圆角水平半径为20px，垂直半径为60px。示例代码对应效果如图2所示。

    1611217533278_2.png

    图2 2个参数值的圆角边框

    ● 水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径；第3个参数值代表右下圆角半径，具体示例代码如下。

    img{border-radius:50px 20px 10px/30px 40px 60px;}

    在上面的示例代码中设置图像左上圆角的水平半径为50px，垂直半径为30px；右上和左下圆角水平半径为20px，垂直半径为40px；右下圆角的水平半径为10px，垂直半径为60px。示例代码对应效果如图3所示。

    1611217519478_3.png

    图3 3个参数值的圆角边框

    ● 水平半径参数和垂直半径参数设置4个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上圆角半径，第3个参数值代表右下圆角半径，第4个参数值代表左下圆角半径，具体示例代码如下。

    img{border-radius:50px 30px 20px 10px/50px 30px 20px 10px;}

    在上面的示例代码中设置图像左上圆角的水平垂直半径均为50px，右上圆角的水平和垂直半径均为30px，右下圆角的水平和垂直半径均为20px，左下圆角的水平和垂直半径均为10px。示例代码对应效果如图4所示。

    1611217505073_4.jpg

    图4 4个参数值的圆角边框

    需要注意的是，当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。例如设置4个参数值的示例代码则可以简写为：

    img{border-radius:50px 30px 20px 10px;}

    值得一提的是，如果想要设置例5-9中图片的圆角边框显示效果为圆形，只需第9行代码更改为：

    img{border-radius:150px;}     /*设置显示效果为圆形*/

    或

    img{border-radius:50%;}      /*利用%设置显示效果为圆形*/

    由于案例中图片的宽高均为300像素，所以图片的半径是150px，使用百分比会比换算图片的半径更加省事。运行案例对应的效果如图5所示。

    1611217496351_5.jpg

    图5 圆角边框的圆形效果

    猜你喜欢：

    CSS3新增了哪些选择器？如何是使用？

    CSS3如何设置颜色不透明度？

    web前端：HTML5+CSS3教程下载

    乐鱼电竞web前端课程

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】