重庆SEO前端技术博客

重庆SEO前端技术博客

当前位置: 主页 > CSS >

css border-radius 属性

时间:2020-10-31 15:30来源:未知 作者:点击:
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性 语法:border-radius: 1-4 length|% / 1-4 length|%; 对于 border-radius 属性可以使用px、%、em三种表示方法; 例子: .cc1{ width: 100px;
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 属性
如果把宽和高一样:那么css属性border-radius: 50px;只要大于50px在没有其他元素影响下它就是一个圆形;
.cc1{
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50px;     
}
 
 border-radius 属性
我们也可以对一个角进行设置:
.cc1{
    width: 100px;
    height: 100px;
    background-color: blue;
    border-top-left-radius:30px;   
}
 
 css border-radius 属性
 
 
我们经常看到一些这样得前缀
-webkit-border-radius   //兼容谷歌浏览器
-moz-border-radius     //兼容火狐浏览器,现在火狐浏览已经支持border-radius属性,所以现在它是没有用得。

------分隔线----------------------------