`
wostyh
  • 浏览: 77200 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

纯CSS无图打造圆角Table

阅读更多

CSS代码:

<style type="text/css"> 
div.RoundedCorner...{background: #9BD1FA} 
b.rtop, b.rbottom...{display:block;background: #FFF} 
b.rtop b, b.rbottom b...{display:block;height: 1px;overflow:  
hidden; background: #9BD1FA} 
b.r1...{margin: 0 5px} 
b.r2...{margin: 0 3px} 
b.r3...{margin: 0 2px} 
b.rtop b.r4, b.rbottom b.r4...{margin: 0 1px;height: 2px} 
</style> 
 

HTML代码:
<div class="RoundedCorner"> 
<b class="rtop"><b class="r1"></b><b class="r2"></b> 
<b class="r3"></b><b class="r4"></b></b> 
    <table style="width:500px;height:100px;"> 
        <tr> 
               <td>单元格1</td> 
           <td>单元格2</td> 
        </tr> 
    <tr> 
               <td>单元格3</td> 
           <td>单元格4</td> 
        </tr> 
    </table> 
<b class="rbottom"><b class="r4"></b><b class="r3"></b> 
<b class="r2"></b><b class="r1"></b></b> 
</div> 
 
分享到:
评论

相关推荐

    纯css标题框圆角代码

    随着CSS技术的发展,我们可以利用纯CSS来实现各种复杂的效果,包括圆角标题框。本篇文章将深入探讨如何使用CSS创建具有圆角的标题框,并通过实际代码示例进行演示。 首先,我们需要了解CSS3中的几个关键属性,它们...

    纯css半圆角tab标签切换代码

    本项目名为“纯css半圆角tab标签切换代码”,它包含了六个HTML文件,每个文件代表一种不同的Tab状态或布局,用于实现平滑的切换效果。 首先,我们要理解CSS(Cascading Style Sheets)的作用。CSS是一种样式表语言...

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...

    老外用纯CSS实现的圆角边框.rar

    当提到“老外用纯CSS实现的圆角边框”时,这通常指的是利用CSS技术来创建具有圆角的元素边框,而无需依赖图片或者其他图形元素。圆角边框在网页设计中很常见,因为它可以增加元素的视觉吸引力,使界面看起来更加现代...

    div+css无图边框圆角实现思路及代码

    在CSS世界中,实现圆角边框的效果是一个重要的设计元素,它使得网页界面更加美观和现代。传统的做法是使用图片来...总的来说,理解并掌握这种无图边框圆角的实现思路,对于了解CSS的发展历程和技术演进是非常有帮助的。

    纯css实现边框圆角效果

    纯CSS实现边框圆角效果是现代Web开发中的基础技能,无需依赖图片切片或JavaScript插件,只需通过CSS3的特定属性就能轻松实现。本教程将深入探讨如何使用CSS来创建具有圆角边框的元素。 首先,我们需要了解CSS3中的`...

    纯CSS打造相册效果项目完整源码

    纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整...

    纯css写的圆角

    很简单的纯css写的圆角,,,简单的该属性就可以方便的进行换肤效果,,值得看看……

    css实现div圆角

    - 根据题目给出的内容,本案例的目标是使用纯CSS实现div元素的圆角效果,且不需要任何JavaScript代码参与。 - 该案例由冰极峰原创,其特点是代码简洁,但效果可能存在一定的局限性。 2. **核心代码解析**: - ...

    table 圆角 html5 css3

    在HTML5和CSS3的世界里,为表格(table)添加圆角效果是一项常见的美化任务,可以使得网页设计更具现代感和优雅。本文将深入探讨如何使用HTML5和CSS3实现表格的圆角效果,以及相关的知识点。 首先,HTML5虽然在语义...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    纯css实现圆角的代码

    有的资料介绍了css3实现圆角,但ie就是不支持,现在,不用任何图片,用纯css打造圆角,兼容任何浏览器。

    CSS3制作圆角、椭圆、梯形带图标的不规则按钮.rar

    HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...

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

    在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3的一些新特性,如圆角和阴影效果。这些特性在现代浏览器中已经非常常见,可以为网页设计提供更丰富的视觉体验。为了让这些老版本的IE浏览器也能...

    纯css实现圆角矩形

    其中,利用纯CSS实现圆角矩形是前端开发者经常遇到的需求之一,尤其在设计按钮、卡片、菜单等元素时。下面,我们将深入探讨如何通过CSS来创建一个具有圆角的矩形,并分析给出的示例代码。 ### 纯CSS实现圆角矩形的...

    css+div圆角窗口

    "css+div圆角窗口"是指利用CSS技术来创建具有圆角边框的网页元素,通常这些元素被设计成类似窗口的形式,提供信息展示或交互功能。 在CSS3之前,要实现圆角效果,开发者需要借助图像或者复杂的JavaScript技巧。然而...

    好看table样式 好看的CSS——Table样式表

    网络上收集的css table样式 好看table样式 好看的CSS——Table样式表

    超棒的纯CSS圆角下拉菜单.rar

    在这个压缩包"超棒的纯CSS圆角下拉菜单.rar"中,包含了一个无JavaScript依赖的下拉菜单实现,主要展示了CSS在构建交互式用户体验方面的强大能力。 1. **纯CSS下拉菜单**: CSS下拉菜单是一种常见的网页导航元素,...

Global site tag (gtag.js) - Google Analytics