html+css做圆角表格

最新推荐文章于 2022-08-17 09:13:59 发布
最新推荐文章于 2022-08-17 09:13:59 发布
阅读量1.1k 收藏 1
点赞数
文章标签： html css class border table filter

方法一

<html><head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <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>
</head><body>
<div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
    </b></b><br>
    无图片实现圆角框<br>
    <br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
    </b></b>
</div>
</body></html>


方法二 
<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
    border="0">
<tbody>
<tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td bgcolor="#908a47"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47"></td>
            <td bgcolor="#f7f8f9" colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr>
    <td>
        <table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
            border="0">
        <tbody>
        <tr>
            <td width="1" bgcolor="#908a47"></td>
            <td id="oINNER" bgcolor="#f7f8f9">  </td>
            <td width="1" bgcolor="#908a47"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr><tr height="3" width="100%">
    <td>
        <table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
            border="0">
        <tbody>
        <tr height="1">
            <td width="1"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>


方法三
  
<html xmlns:v><head>
    <style>
 
v/:* {behavior: url(#default#VML);} 

</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
    <v:textbox style="font-size: 12px">css实现真正的圆角表格</v:textbox>
</v:roundrect>
</body></html>


方法四 

<html>
<style type="text/css">

.rd{font-family: "宋体";font-size: 14px;height: 12px;width: 12px;margin: 0px;padding: 0px;line-height: 12px;}
#l{filter:DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0);}
#r{filter:DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0);}
.tb{filter:DropShadow(Color=#cccccc,OffX=3,OffY=3);}#cn{font-family:"宋体";font-size: 14px;line-height:24px;}#en{font-family:"Verdana";font-size: 11px;}#ct{filter:DropShadow(Color=#ffffff,OffX=-1,OffY=-1)DropShadow(Color=#6699cc,OffX=1,OffY=1);position:relative;height:40px;}body{overflow:hidden;background:#eeeeee;}

</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb">
<tr>
    <td class="rd" id="l">╭</td>
    <td valign="bottom">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#000000" height="1"></td>
        </tr><tr>
            <td bgcolor="#00CCFF" height="7"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="r">╮</td>
</tr><tr>
    <td align="right">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="1" bgcolor="#000000"></td>
            <td bgcolor="#00CCFF" width="7"></td>
        </tr>
        </table>
    </td>
    <td bgcolor="#00CCFF" valign="top">
        <div id="ct">
            <label id="en">Fight for the cause of world peace!</label><br />
            <label id="Label1">The importance of a proper diet in maintaining health should not
                be disregarded.</label><br />
            <label id="cn">欢迎进入我们的网站，http://www.cc0773.com/</label>
            <label id="Label2">。</label>
        </div>
    </td>
    <td align="left">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" width="6"></td>
            <td width="1" bgcolor="#000000"></td>
        </tr>
        </table>
    </td>
</tr><tr>
    <td class="rd" id="Td1">╰</td>
    <td valign="top">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" height="5"></td>
        </tr><tr>
            <td bgcolor="#000000" height="1"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="Td2">╯</td>
</tr>
</table>
</body></html>
hhxxcj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中表单设置圆角,使用css选择器来实现表格的四角变圆角——2019.9.6
weixin_39760295的博客
07-14 2161
这次对表格来一次操作，用css控制表格中的某个属性进改变。目的嘛就是为了熟悉属性选择操作。先获得表格~勇者培训中心课程安排星期星期一星期二星期三星期四星期五上午治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志下午战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗备注：还欠修女两枚金币接着再用css来改变样式table{border:1pxsolid#444;borde...
html中table四角圆弧,table设置圆角的两种方式
weixin_42357618的博客
06-11 7313
默认代码table {width: 100%;background-color: yellowgreen;text-align: center;}表头1表头2表头3123456复制代码原因如果我们直接对table设置border-radius是不会生效的， 因为table的默认属性border-collapse值为collapse。border-collapse:collapse和border-r...
用CSS样式定义的圆角表格
04-07
网页特效用CSS样式定义的圆角表格......................
给table表格的tr标签添加圆角效果
weixin_69031972的博客
06-09 3146
最近有个需求是给表格的每一栏数据加上一个椭圆的背景，原本以为只有添加 border-radius和背景色就能搞定，然而结果是边框和圆角对tr标签并不生效，轮廓虽然生效但是设置不了圆角效果，,经过百度发现了一篇有趣的文章，通过给tr加阴影的操作实现圆角效果。代码如下： hhh，有用的知识有增加了。原贴地址：https://www.shuzhiduo.com/A/VGzlVobw5b/...
圆角表格制作原理html,html做圆角表格
weixin_29000891的博客
05-31 424
将以下代码插入在合适的单元格位置中：style="table-layout: fixed" height=28 cellspacing=0 cellpadding=0width="50%" border=0> cellspacing=0 cellpadding=0 width="100%" border=0> cellspacing=0 cellpadding=0 border=0&g...
html表格做成圆,制作圆角表格(Table)的完整代码
weixin_31029019的博客
05-30 670
制作圆角表格(Table)的完整代码(2006-11-10 09:54:17)>body{background-color: #FFF;}div#nifty1{ margin: 0 10px;background: #9BD1FA;}div#nifty2{ margin: 0 10px;background: #9BD1FA;}div#nifty3{ margin: 0 10px;backg...
HTML5+CSS3 制作圆角表格
qq_55786319的博客
11-03 716
知识点总结： :first-child 选择器匹配其父元素中的第一个子元素。 border-radius属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式。
几个html+css常用表格
weixin_48271592的博客
07-13 1277
几个常用的纯html+css表格： 有时候ui框架提供的表格并不能完全满足我们的需求，这时候就需要手写表格了。我把最近用的到几个表格存一下，方便以后CV。 1.普通斑马纹表格（公司信息、个人信息表）： 例如： 1、 效果图 2、 HTML代码 <table class="printTB detailTb gua-detail-table" cellspacing="0" cellpadding="0"> <tbody> <
漂亮的表格css+html
03-20
"漂亮的表格css+html"这个主题聚焦于如何利用CSS（层叠样式表）和HTML（超文本标记语言）来创建视觉吸引力强且用户体验良好的表格。下面我们将详细探讨相关的知识点。 1. **HTML表格基础**： - `<table>`标签：...
CSS 用ul li做圆角表格
01-19
这两天和表格纠结上了…工作需要做表格，但是不想重复相同的方法，前两天用dl dt dd，今天用ul li做个圆角表格，圆角用了背景图片。再次声明：数据输出型的表格不推荐使用div+css。测试浏览器：IE6\IE7\IE8\FF3.0\...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
HTML5 + CSS3 chm中文参考手册.rar
12-08
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现形式和强大的交互功能。HTML5是超文本标记语言HTML的最新版本，它在原有的基础上引入了大量新元素，增强了网页的语义性和可访问性，同时...
html+css实现京东商城
01-02
在本项目中，“html+css实现京东商城”旨在利用HTML和CSS这两种前端核心技术来构建一个与京东商城网页相似的界面。HTML（HyperText Markup Language）是网页内容的基础结构语言，而CSS（Cascading Style Sheets）则...
div css圆角代码各种圆角表格_圆角边框css圆角
11-11
本篇文章将深入探讨如何使用 `div` 和 `CSS` 实现各种圆角表格和圆角边框。 首先，我们了解 `div` 元素。`div` 是一个通用的容器元素，用于组合网页上的其他元素。通过应用样式，我们可以让 `div` 元素呈现不同的...
HTML5+CSS3应用详解
12-14
在HTML4时代，设计师们常常依赖于表格(table)布局来构建页面结构，但这导致了代码的混乱，而且缺乏语义。通过引入标签，设计师们开始转向更语义化的布局，但仍然面临过度依赖标签的问题，即所谓的"div-soup"。HTML5...
html表格做成圆,在table表格中实现圆角效果
weixin_33162074的博客
05-30 1291
在table中设置border-radius发现不起作用，网上查找了一番，原因是border-collapse:collapse和border-radius不兼容。设计图效果代码实现效果：#table_wrap > table {font-size: 16px;text-align: center;margin: 0 auto;border-collapse: separate;border...
html表格怎么改圆角边框,Table元素设置圆角border
weixin_39980298的博客
06-15 1778
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？Table元素设置圆角border-radius首先，我们先对border-collapse属性进行简单的了解。有以下三个属性值：separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框。会忽略 borde...
html 圆角
weixin_73326146的博客
08-17 4721
html圆角
html5+css 代码.docx
最新发布
02-28
- 可以在表格单元格中嵌套另一个表格，通过CSS选择器`.uname:hover`实现子表格元素的悬停效果。 6. 元素聚焦与输入控件： - `:focus`伪类用于设置元素获得焦点时的样式，如`.pwd:focus`使得密码输入框聚焦时有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值