您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

css实现圆角图形绘制的方法

作者:佚名    责任编辑:admin    更新时间:2022-06-22

欢迎大家在这里学习css实现圆角图形绘制这里是我们给大家整理出来的精彩内容。我相信,这些问题也肯定是很多朋友在关心的,所以我就给大家谈谈这个!

XML/HTML Code复制内容到剪贴板

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css

CSS Code复制内容到剪贴板

body{background-color:#000;}

.curvedBox{

width:300px;

margin: 2510px auto 0;

}

.curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{

background-color:#fff;

display:block;

overflow:hidden;

height:1px;

font-size:1px;

}

.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{

border-width:0 1px;

border-left:1px solid #fff;

border-right:1px solid #fff;

}

.curvedBox .r1{margin:0 6px;}

.curvedBox .r2{margin:0 3px;}

.curvedBox .r3{margin:0 2px;}

.curvedBox .r4{

margin:0 1px;

height:2px;

}

.curvedBox .content{

background:#fff;

border-left:1px solid #fff;

border-right:1px solid #fff;

padding:0 5px;

}

好了,css实现圆角图形绘制内容就给大家介绍到这里了。希望大家继续关注我们的网站!

相关推荐:

CSS3中使用RGBA设置透明度方法介绍