CSS制作圆角边框

亦凉 2022-01-07 12:13 407阅读 0赞

转自： [http://blog.onlygrape.com/css-arc/362][http_blog.onlygrape.com_css-arc_362]

一直做圆角的边框都是用图片来铺成的，这次尝试了下用CSS来制作圆角的边框，效果还是蛮不错的。

代码如下：

< style  type ="text/css" >   
  
 .arcaround  \{  width : 100% ;  height : auto ; \}   
 .arc, .abottom  \{  display : block ;  background : transparent ;  font-size : 1px ; \}   
 .xb1, .xb2, .xb3, .xb4  \{  display : block ;  overflow : hidden ; \}   
 .xb1, .xb2, .xb3  \{  height : 1px ; \}   
 .xb2, .xb3, .xb4  \{  background : \#ccc ;  border-left : 1px solid \#08c ;  border-right : 1px solid \#08c ; \}   
 .xb1  \{  margin : 0 5px ;  background : \#08c ; \}   
 .xb2  \{  margin : 0 3px ;  border-width : 0 2px ; \}   
 .xb3  \{  margin : 0 2px ; \}   
 .xb4  \{  height : 2px ;  margin : 0 1px ; \}   
  
 .acontent  \{  display : block ;  background : \#ccc ;  height : 20px ;  border : 0 solid \#08c ;  border-width : 0 1px ; \}   
  
 </ style >   
  
 < div  class ="arcaround " >   
 < b  class = " arc " >< b  class = " xb1 " ></ b >< b  class = " xb2 " ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >   
 < div  class ="acontent" ></ div >   
 < b  class ="abottom" >< b  class ="xb4" ></ b >< b  class ="xb3" ></ b >< b  class ="xb2" ></ b >< b  class ="xb1" ></ b ></ b >   
 </ div >

效果如图：

![impact.jpg][]

转载于:https://www.cnblogs.com/iswszheng/archive/2009/07/29/1525045.html

[http_blog.onlygrape.com_css-arc_362]: http://blog.onlygrape.com/css-arc/362
[impact.jpg]: /images/20211223/e67dda64edcd4781bfd0d8a7b05386d5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读

相关圆角边框（HTML、CSS）

圆角边框（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta

拼搏现实的明天。/ 2023年10月03日 13:35/ 0 赞/ 2 阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 156 阅读

相关 css圆角边框(css圆角边框无效)

纯CSS制作圆角边框的代码是什么? \xsnazzy h1, \xsnazzy h2, \xsnazzy p \{margin:0 10px; letter-spacin

野性酷女/ 2023年09月26日 13:09/ 0 赞/ 22 阅读

相关 CSS 圆角边框

CSS 圆角边框 ![在这里插入图片描述][20210325184439421.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

灰太狼/ 2022年11月13日 04:29/ 0 赞/ 290 阅读

相关 246.CSS 渐变圆角边框

效果 (源码网盘地址在最后) ![70bd77719c286f0c0b60906286fb67b8.gif][] 源码 index.html <!DOC

痛定思痛。/ 2022年09月12日 12:44/ 0 赞/ 280 阅读

相关 DIV+CSS圆角边框

简洁型css圆角：方法1：简洁型css圆角矩形 code1: [![复制代码][copycode.gif]][copycode.gif 1] ![Expanded

小灰灰/ 2022年08月27日 08:50/ 0 赞/ 259 阅读

相关 CSS实现边框圆角

CSS实现边框圆角通过设置border-radius可以实现圆角边框的效果。 1.分别设置四个角的半径值在border-radius属性中，依次书写四个角的半

短命女/ 2022年06月09日 05:39/ 0 赞/ 485 阅读

相关 Css3圆角边框

1行代码搞定CSS3的圆角。 webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px; fire

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 371 阅读

相关 CSS制作圆角边框

转自： [http://blog.onlygrape.com/css-arc/362][http_blog.onlygrape.com_css-arc_362] 一直做圆角的

亦凉/ 2022年01月07日 12:13/ 0 赞/ 408 阅读

相关 CSS3边框与圆角

1. CSS3 圆角 border-radius 属性 > 一个最多可指定四个border -\- radius属性的复合属性，这个属性允许你为元素添加圆角边

水深无声/ 2021年11月05日 12:56/ 0 赞/ 380 阅读