css3 - border-radius

最新推荐文章于 2024-01-04 12:06:37 发布

erdouzhang

最新推荐文章于 2024-01-04 12:06:37 发布

阅读量297

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/70904148

版权

css3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

兼容性：

浏览器	Firefox	Safari	Opera	Chrome
各浏览器兼容性写法	-moz-border-radius	-webkit-border-radius	border-radius	border-radius/-webkit-border-radius

这里写图片描述

html：

<div>示例文字示例文字</div>

css：

div {
    width: 100px;
    background-color: pink;
    padding: 10px;
    border: 3px solid red;
    border-radius: 20px;
    -moz-border-radius: 20px;/*兼容Firefox*/
    -o-border-radius: 20px;/*兼容Opera*/
    -webkit-border-radius: 20px;/*兼容Chrome、Safari*/
}

解析：border-radius:左上角、右上角、右下角、左下角；
图一是设置一个圆角；
图二是设置两个圆角，即border-radius: 30px 10px;；
图三是不显示边框；
图四是边框线为虚线；
图五是设置四个圆角，即border-radius: 5px 15px 25px 40px;；