`
jimichan
  • 浏览: 280609 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

才发现的 纯css的圆角DIV解决方案

    博客分类:
  • UI
阅读更多

纯css解决方案的网站地址 http://www.spiffycorners.com/

在如上的页面里面可以选择颜色来生成如下代码:

 

 

 

<style type="text/css">
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#56E69E}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #b0eecf;
  border-right:1px solid #b0eecf;
  background:#7de9b3}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5f3ec;
  border-right:1px solid #e5f3ec;
  background:#74e8ae}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #74e8ae;
  border-right:1px solid #74e8ae;}
.spiffy4{
  border-left:1px solid #b0eecf;
  border-right:1px solid #b0eecf}
.spiffy5{
  border-left:1px solid #7de9b3;
  border-right:1px solid #7de9b3}
.spiffyfg{
  background:#56E69E}
</style>
 
<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
    <!-- content goes here -->
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>
 

 

  • 大小: 9.8 KB
4
1
分享到:
评论
3 楼 oec2003 2009-05-20  
bilang 写道

你可以看下 http://malsup.com/jquery/corner/

这个确实不错
2 楼 jimichan 2008-03-03  
不过那个解决方案是要调用js的
1 楼 bilang 2008-02-21  
你可以看下
http://malsup.com/jquery/corner/

相关推荐

    纯css实现圆角矩形

    一种常见的解决方案是在CSS中添加特定于浏览器的前缀,如`-webkit-border-radius`、`-moz-border-radius`等,以确保跨浏览器的一致性。 ### 分析给定示例代码 给出的代码示例使用了一种较为传统的CSS方法来实现...

    JavaScript 制作div圆角

    JavaScript制作div圆角是网页开发中的常见需求,它可以通过CSS3的border-radius属性来实现,但在某些不支持此属性的老式浏览器中,我们可能需要借助JavaScript来达成目标。本篇文章将深入探讨如何利用JavaScript实现...

    css圆角.docx

    对于现代浏览器,可以使用CSS3的`border-radius`属性,它提供了一种简单、高效且兼容大多数浏览器的圆角解决方案。但在需要兼容老版本浏览器(如IE6-8)时,可能需要结合其他技术,如VML或图片方法。同时,为了优化...

    无懈可击的CSS圆角边框(自由伸缩)

    然而,当涉及到创建一个可以自由伸缩的圆角边框时,就需要更为复杂的解决方案。本文将详细介绍如何利用CSS实现一个既美观又能适应不同内容长度的圆角边框。 #### 核心知识点详解 **1. HTML代码结构** 为了创建一...

    使用Div+CSS纯图片实现圆角矩形的方法小结

    在Web开发中,圆角矩形是一种...特别是针对那些老旧浏览器或者需要精细控制圆角位置和样式的场景,使用图片来实现圆角矩形仍旧是一个不可替代的解决方案。掌握这些方法,可以为日常的Web开发提供更多的灵活性和稳定性。

    用CSS样式定义的圆角表格

    通过分析提供的文件信息,我们可以...虽然现代浏览器已经支持更简洁的`border-radius`属性来实现圆角效果,但对于早期版本的浏览器或需要兼容性更好的解决方案来说,这种基于嵌套元素的方法仍然具有一定的参考价值。

    css3 支持ie8以下圆角

    在标题"css3 支持ie8以下圆角"和描述"DIVCSS5圆角实例,CSS3版本圆角实例,支持低版本IE6-IE9浏览器"中,我们关注的关键知识点是CSS3的圆角边框以及如何在早期的Internet Explorer浏览器(IE6到IE9)中实现兼容性。...

    css3处理所有浏览器都兼容的无图片圆角问题

    在网页设计中,圆角效果经常被用于提升页面的视觉美观度,但早期的CSS标准并未提供原生支持,导致在不同浏览器间实现圆角效果存在兼容性问题。随着CSS3的推出,这个问题得到了很好的解决。本文将详细介绍如何使用CSS...

    JS实现DIV、图片圆角效果

    此外,现代浏览器已经提供了更好的跨浏览器圆角解决方案,如使用`-webkit-mask-image`和`-moz-mask-image`等前缀属性,以及CSS3的`mask`属性。结合条件语句,我们可以为不同的浏览器提供合适的圆角实现。 综上所述...

    CSS Sprites 圆角制作教程

    在【初步介绍】中,作者提到虽然已有许多关于CSS圆角的教程,但他希望通过这篇文章提供一个易于理解的高级CSS技术应用,同时兼顾初学者的理解。由于CSS3的圆角边框(border-radius)属性尚未全面支持,该教程采用的...

    纯css 圆角实现代码

    首先,我们要了解CSS圆角的基本原理。在CSS3中,通过`border-radius`属性可以直接设置元素的边框为圆角,例如`border-radius: 10px;`可以使一个元素的四个角都变为10像素的圆角。但在早期的浏览器版本中,这个功能...

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    为了让这些老版本的IE浏览器也能实现类似的视觉效果,开发者们开发了一些技巧和解决方案。下面我们将详细探讨如何让这些旧版IE支持CSS3的圆角和阴影样式。 首先,让我们来了解CSS3中的圆角和阴影效果。在CSS3中,`...

    div圆角兼容ie8

    2. IE8兼容性解决方案:要使圆角在IE8中生效,可以使用Vml(Vector Markup Language)或者CSS3 PIE(Progressive Internet Explorer)库。Vml是一种微软专为IE设计的矢量图形语言,而CSS3 PIE则是一个JavaScript和...

    CSS实现绝对的完美圆角框

    首先,无图片纯CSS圆角框是基于CSS3特性的解决方案,它通过创建多个内嵌的div元素并利用边框和背景色的结合,模拟出圆角效果。这种方法的优点在于无需额外的图片资源,具有较好的兼容性,适用于所有浏览器。然而,...

    CSS 制作圆角边框.docx

    总的来说,早期的CSS圆角边框实现技术反映了前端开发的进化历程,从复杂和不兼容的解决方案到现在的标准化和简洁方法。理解这些历史技巧可以帮助我们更好地掌握CSS,并且对过去和现在的技术有更深的理解。

    CSS实现绝对的完美圆角框.docx

    本文将详细介绍四种主流的CSS圆角框实现方法,旨在提供一个全面的解决方案。 **第一种:无图片纯CSS圆角框** 这种方法通过创建多个div容器,利用背景色和边框颜色的组合模拟圆角。优点是兼容性好,适用于所有...

    CSS兼容性问题解决方案[归类].pdf

    本文档旨在解决 CSS 中的兼容性问题,涵盖了多个方面的解决方案,包括 DOCTYPE 的影响、盒模型的解释不一致、ul 和 ol 列表缩进问题、CSS 透明问题、CSS 圆角问题、cursor 问题、字体大小定义不同问题、CSS 双线凹凸...

Global site tag (gtag.js) - Google Analytics