美文网首页
css3-圆角

css3-圆角

作者: AssertDo | 来源:发表于2019-08-26 16:08 被阅读0次
     /*添加边框圆角*/
                /*1.设置一个值:四个角的圆角值都一样*/
                border-radius: 10px;
                /*2.设置两个值:第一个值控制左上/右下,第二个值控制右上/左下*/
                border-radius: 10px 30px;
                /*3.设置三个值:第一个值控制左上,第二值控制右上/左下,第三个值控制右下*/
                border-radius: 10px 40px 60px;
                /*4.设置四个值:左上  右上 右下 左下*/
                border-radius: 10px 30px 60px 100px;
    
                /*添加/是用来设置当前个不同方向的半径值  水平x方向/垂直y方向*/
                border-radius: 100px/50px;
    
                /*添加某个角点的圆角*/
                border-radius: 0px 50px 0px 0px;
                /*border-上下-左右-radius:*/
                border-top-right-radius: 100px;
                border-top-left-radius: 100px;
                border-bottom-left-radius: 100px;
                border-bottom-right-radius: 100px;
    
                /*设置某个角点的两个方向上的不同圆角*/
                border-top-right-radius: 100px 50px;
                border-bottom-left-radius: 80px 40px;
                border-bottom-right-radius: 60px 30px;
                border-top-left-radius: 40px 20px;
                /*如果想设置四个角点的不同方向上的不同圆角值*/
                /*分别是水平方向的:左上,右上,右下,左下 / 垂直方向的:左上,右上,右下,左下*/
                border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;
    
    

    相关文章

      网友评论

          本文标题:css3-圆角

          本文链接:https://www.haomeiwen.com/subject/hxkdectx.html