收获2.css圆角总结

浏览数：35 / 时间：2015年06月09日

css圆角想必大家再熟悉不过了，下面分享一些我知道的，你有可能不知道的知识~~~~

使用圆角有以下几种方法

1.切图

将四个圆角切图，将父元素设置relative，将四个角通过absolute定位到固定位置，在父元素不设置高宽时，是可以自适应的，这种方法想必大多数人都知道

就不再废话了。

如果需要兼容ie，那么此方法是最好的选择了。

2.像素画

使用html+css2.0绘制圆角弧度

HTML代码

<div class="wrap">
    <div class="rtop">             //绘制弧度
        <div class="r1"></div>
        <div class="r2"></div>
        <div class="r3"></div>
        <div class="r4"></div>
    </div>
    <p>
        我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角我是纯css的圆角
    </p>
    <div class="rtop">
        <div class="r4"></div>
        <div class="r3"></div>
        <div class="r2"></div>
        <div class="r1"></div>
    </div>
</div>

CSS代码

*{
    margin: 0;
}
.wrap{
    width: 598px;
    margin-left: 100px;
    text-align: center;
}
.wrap p{
    padding: 10px 5px;
    background-color: #747474;
}
.rtop div{
    height: 1px;      /*将高度设置为1px*/
    background-color: #747474;
}
.rtop .r1{
    margin: 0 3px;    /*使每一个高为1px的div拥有不同的外边距，产生弧度的效果*/
}
.rtop .r2{
    margin: 0 2px;
}
.rtop .r3{
    margin: 0 1px;
}
.rtop .r4{
    margin: 0 1px;
}

运行代码

技术分享

但是这种方法很有局限性

背景色必须是纯色，圆角弧度不能过大，否则导致代码过于累赘。

3.border-radius

基本属性值就不介绍了

但你是否知道在border-radius的属性值是百分比时才是真正的圆，而用像素值时，其实圆角是不圆的，

送给大家一段比较好玩的代码，运行一下你就知道上句话是什么意思啦~不要光看不做哦！

如果有什么不对的地方希望各位大神们指点！

<div class="line line-1">
    <div class="demo1">
        <div class="one size"></div>
        <div class="two size"></div>
        <div class="three size"></div>
        <div class="four size"></div>
        <div class="btn">像素</div>
    </div>
</div>
<div class="line line-2">
    <div class="demo2">
        <div class="one size"></div>
        <div class="two size"></div>
        <div class="three size"></div>
        <div class="four size"></div>
        <div class="btn">百分比</div>
    </div>
</div>

html

*{
    margin: 0;
    padding: 0;
}
.line{
    height: 300px;
    width: 100%;
    padding-top: 100px;
}
.line-1{
    background-color: #6c5f57;
}
.line-2{
    background-color: #8bcf92;
}

.demo1{
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0px auto; 
}
.btn{
    background-color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    color:#2c5c70;
    line-height: 80px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0; 
}
.btn:hover{
    background-color: #ccc
}
.demo1 .size{
    width: 72px;
    height: 72px; 
    border: 4px solid #fff;
    position: absolute;
    left: center;
    top: center;
    border-radius: 36px;
}

.demo2{
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0px auto;
}
.demo2 .size{
    width: 72px;
    height: 72px; 
    border: 4px solid #fff;
    position: absolute;
    left: center;
    top: center;
    border-radius: 100%;
}
.one{
    animation:myfirst 2s linear infinite;
    -moz-animation:myfirst 2s linear infinite;
    -webkit-animation:myfirst 2s linear infinite; 
    -o-animation:myfirst 2s linear infinite;}
.two{
    animation:myfirst 2s linear 0.5s infinite;
    -moz-animation:myfirst 2s linear 0.5s infinite;
    -webkit-animation:myfirst 2s linear 0.5s infinite;
    -o-animation:myfirst 2s linear 0.5s infinite;   
}
.three{
    animation:myfirst 2s linear 1s infinite;
    -moz-animation:myfirst 2s linear 1s infinite;
    -webkit-animation:myfirst 2s linear 1s infinite;
    -o-animation:myfirst 2s linear 1s infinite;    
}
.four{
    animation:myfirst 2s linear 1.5s infinite;
    -moz-animation:myfirst 2s linear 1.5s infinite;
    -webkit-animation:myfirst 2s linear 1.5s infinite;
    -o-animation:myfirst 2s linear 1.5s infinite;   
}


@keyframes myfirst
{
0%   {transform:scale(1);opacity: 0.8}
25%  {transform:scale(1.5);opacity: 0.6}
50%  {transform:scale(2);opacity: 0.4}
75%  {transform:scale(2.5);opacity: 0.2}
100% {transform:scale(3);opacity: 0}
}

@-moz-keyframes myfirst
{
0%   {transform:scale(1);opacity: 0.8}
25%  {transform:scale(1.5);opacity: 0.6}
50%  {transform:scale(2);opacity: 0.4}
75%  {transform:scale(2.5);opacity: 0.2}
100% {transform:scale(3);opacity: 0}
}

@-webkit-keyframes myfirst
{
0%   {transform:scale(1);opacity: 0.8}
25%  {transform:scale(1.5);opacity: 0.6}
50%  {transform:scale(2);opacity: 0.4}
75%  {transform:scale(2.5);opacity: 0.2}
100% {transform:scale(3);opacity: 0}
}

@-o-keyframes myfirst
{
0%   {transform:scale(1);opacity: 0.8}
25%  {transform:scale(1.5);opacity: 0.6}
50%  {transform:scale(2);opacity: 0.4}
75%  {transform:scale(2.5);opacity: 0.2}
100% {transform:scale(3);opacity: 0}
}