css border-radius 属性_重庆SEO前端技术博客

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性

语法：border-radius: 1-4 length|% / 1-4 length|%;

对于border-radius 属性可以使用px、%、em三种表示方法；

例子：
.cc1{
    width: 100px;
    height: 50px;
    background-color: blue;
    border-radius: 20px;

/*
    border-radius: 20px;等介于以下：
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-bottom-left-radius:20px; */
}

如果把宽和高一样：那么css属性border-radius: 50px;只要大于50px在没有其他元素影响下它就是一个圆形；
.cc1{
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50px;
}

我们也可以对一个角进行设置：
.cc1{
    width: 100px;
    height: 100px;
    background-color: blue;
    border-top-left-radius:30px;
}

我们经常看到一些这样得前缀
-webkit-border-radius //兼容谷歌浏览器
-moz-border-radius //兼容火狐浏览器，现在火狐浏览已经支持border-radius属性，所以现在它是没有用得。

搜索

热门标签:

css border-radius 属性