用于Jimdo网站的纯CSS无图片圆角矩形代码

      在CSS里,默认的边框都是矩形,如果在矩形边框上加个圆角,就会漂亮很多,遗憾的是,现在好象还没有兼容各种浏览器的CSS圆角属性。常见的圆角效果,大都是利用一定的图片,通过CSS代码来实现的。网上邻居在网上搜索了一下,找到了一些比较简单的纯CSS无图片圆角代码,修改后用到Jimod网站上,效果还不错。

      上面就是本文要介绍的圆角代码的效果演示,由于采用了基本的CSS代码,所以它的兼容性很好,经IE、FF、OP等主流浏览器测试,效果都是一样的。具体代码如下。

CSS:

.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #ccc;border-right:1px solid #ccc;}
.b1,.b1b{margin:0 5px;background:#ccc;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#f2f5f2;padding-left:0 8px;}

      这是一个非常实用而流行的纯CSS无图片圆角代码,它没有设置宽度和高度,而是分别根据版面宽度和内容自适应的。其中,#ccc是边框线的颜色,.d1可以设置框内背景颜色以及内边距和外边距等,想试试的朋友可以根据需要修改。

页面代码(HTML):

<div class="b1"></div>
<div class="b2 d1"></div>
<div class="b3 d1"></div>
<div class="b4 d1"></div>
  <div class="b d1">
  纯CSS无图片圆角矩形代码演示(矩形框内容)

  纯CSS无图片圆角矩形代码演示(矩形框内容)
  </div>
<div class="b4b d1"></div>
<div class="b3b d1"></div>
<div class="b2b d1"></div>
<div class="b1b"></div>

      应用时,在页面上添加“Widget/HTML”元素,然后复制以上HTML代码,再在“矩形框内容”处输入自己的内容。上述代码演示效果如下:

  纯CSS无图片圆角矩形代码演示(矩形框内容)
  纯CSS无图片圆角矩形代码演示(矩形框内容)

      只要搞明白了上述代码的意义,就可以灵活运用。比如,我们只要修改一下页面代码(CSS代码不变),就能出现以下的效果(修改了宽度、背景色及使它居中):

      在CSS里,默认的边框都是矩形,如果在矩形边框上加个圆角,就会漂亮很多,遗憾的是,现在好象还没有兼容各种浏览器的CSS圆角属性。常见的圆角效果,大都是利用一定的图片,通过CSS代码来实现的。网上邻居在网上搜索了一下,找到了一些比较简单的纯CSS无图片圆角代码,修改后用到Jimod网站上,效果还不错。

      上述代码的页面代码稍嫌复杂,但是圆角的效果还是很理想的。还有一种简单一点的无图片纯CSS圆角代码,不过,其圆角狐度也差的多。它的效果演示如下:

      在CSS里,默认的边框都是矩形,如果在矩形边框上加个圆角,就会漂亮很多,遗憾的是,现在好象还没有兼容各种浏览器的CSS圆角属性。常见的圆角效果,大都是利用一定的图片,通过CSS代码来实现的。网上邻居在网上搜索了一下,找到了一些比较简单的纯CSS无图片圆角代码,修改后用到Jimod网站上,效果还不错。

CSS:

.d1{height:1px; overflow:hidden; margin:0 1px; background:#ccc;}
.d2{height:1px; overflow:hidden; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.d{padding:8px;border-left:1px solid #ccc; border-right:1px solid #ccc;}

页面代码(HTML):

<div class="d1"></div>
<div class="d2"></div>
<div class="d">
内容 
</div>
<div class="d2"></div>
<div class="d1"></div>

Write a comment

Comments: 13
  • #1

    网型网秀 (Sunday, 21 November 2010 19:30)

    可以分别设置每个角的圆角图片,利用CSS定义位置,这样的效果不错,我就是这样用的。

  • #2

    网上邻居 (Sunday, 21 November 2010 20:06)

    说的没错,纯css实现圆角,代码比较烦复。期待网型网秀把用图片实现圆角的方法介绍一下。

  • #3

    网型网秀 (Sunday, 21 November 2010 22:31)

    不过制作很麻烦,所以还是建议使用邻居推荐的方法,呵呵

  • #4

    Suitear (Monday, 22 November 2010 18:38)

    与其浪费代码行,不如规规矩矩用矩形,等待Css3的到来,再说,目前除了老掉牙的ie家族前几位,大家都支持了~

  • #5

    网上邻居 (Monday, 22 November 2010 18:47)

    呵呵,说的极是。邻居在这里的目的只是学习。

  • #6

    淘宝600家园 (Wednesday, 24 November 2010 15:41)

    第一种的圆角效果不错.

  • #7

    独星 (Wednesday, 24 November 2010 18:49)

    嗯嗯,赞同楼上的说法~~~~广告盒的内容有些地方溢出了,请修改一下!

  • #8

    博客之家 (Monday, 29 November 2010 13:53)

    太实用了,学习一下啊

  • #9

    网上邻居 (Monday, 29 November 2010 21:20)

    淘宝600家园:
    正如Suitear所说的,现在很多浏览器都支持CSS圆角属性,如FF、OP等,要么直接支持,要么有自己的私有属性。我所知道的,Firefox可以用-moz-border-radius,Opera好象是直接支持border-radius,我现在的这个留言部分,就用了上面的属性。用一大堆div来说这个圆角,只是因为IE还不支持。

  • #10

    网上邻居 (Monday, 29 November 2010 21:21)

    独星:
    谢谢你的提醒,我把广告盒又改了一下。

  • #11

    网上邻居 (Monday, 29 November 2010 21:42)

    博客之家:你好!
    谢谢来访并留言!你的博客人气很高...如果博主把版面改进一下,效果可能会更好。

  • #12

    悦悦妈妈 (Thursday, 03 November 2011 14:41)

    一直在找这个,终于找到了,因自己也不会作圆角图片,所以很有用,拿走了!!

  • #13

    Best iPhone 6S Plus Case (Wednesday, 06 April 2016 17:11)

    The device comes with a similar look of iPhone 5s, with same flat edges and chamfered edges. The main difference between iPhone 5s and iPhone SE is that, iPhone 5s comes with shiny look and iPhone SE comes with a matte look.