CSS3 border-radius 圆角及图片圆角

建站日常 2020-10-16

CSS3之borderradius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角图片圆角效果。div css3 borderradius圆角样式教程篇。

设置DIV对象盒子四个角5像素圆角效果

设置DIV对象盒子左上角和右下角5px圆角,其它两个角为0不圆角

设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角

代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。

CSS3 borderradius圆角结构分析图

CSS3 border-radius 圆角及图片圆角-

DIVCSS5分别对两个DIV盒子设置圆角、一个图片设置圆角实践CSS3圆角。

1、案例HTML代码

2、案例CSS代码:

3、圆角案例效果截图

CSS3 border-radius 圆角及图片圆角-

4、案例说明

1)、第一个BOX盒子为了观察到圆角效果所以设置了边框样式,同时设置圆角样式borderradius:5px 5px 0 0;设置左上角和右上角圆角。

2)、第二个BOX3盒子设置背景色,同时设置圆角样式borderradius:5px 0,设置左上角和右下角圆角

3)、第三个对box2盒子里图片img设置圆角样式border-radius:5px,设置四个角均圆角。

评论 (0)
    Top https://www.laoyua.com/sitemap.xml