css 样式边框

最新推荐文章于 2024-04-02 20:02:01 发布
最新推荐文章于 2024-04-02 20:02:01 发布
阅读量1.4k 收藏 2
点赞数
文章标签： css border table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtxzhs/article/details/2728006
版权

一． 虚线

<TABLE width="400" style="border-style:solid; border-color:#ff99cc; border-width:1px;">
<TR><TD align="center" style="border-style:dashed; border-color:#ff99cc;
border-width:1px;">输入文字</TD></TR></TABLE>

二．圆点

<TABLE width="400" style="border-color:#ff99cc; border-width:4px;
border-style:dotted;"><TR><TD align="center">输入文字</TD></TR></TABLE>

三．方点

<TABLE width="400" style="border-color:#ff99cc; border-width:2px;
 border-style:dotted;"><TR><TD align="center">输入文字</TD></TR></TABLE>

四．双层

<TABLE width="400" style="border-color:#ff99cc; border-width:4px; border-style:double;">
<TR><TD align="center">输入文字</TD></TR></TABLE>

五．方长点

<TABLE width="400" style="border-color:#ff99cc; border-width:4px;
border-style:dashed;"><TR><TD align="center">输入文字</TD></TR></TABLE>

六．虚线带背景

<TABLE width="400" bgcolor="#ff99cc">
<TR><TD align="center" style="border-style:dashed; border-color:#ffffff;
 border-width:1px;">输入文字</TD></TR></TABLE>

七．内框圆点带背景

<TABLE width="400" bgcolor="#ff99cc">
<TR><TD align="center" style="border-style:dotted;
border-color:#ffffff; border-width:4px;">输入文字</TD></TR></TABLE>

八．外框圆点带背景

<TABLE width="400" bgcolor="#ff99cc" style="border-style:dotted;
border-color:#ff99cc; border-width:4px;">
<TR><TD align="center">输入文字</TD></TR></TABLE>

九．邮票边框

<TABLE border="0" cellpadding="10"
cellspacing="0" bgcolor="#ff99cc"
style="border:dashed 3px #ff99cc;">
<TBODY><TR><TD width="400" >
<div align="center">输入文字</div></TD>
</TR></TBODY>
</TABLE>

十．中空围边带背景

<table bgcolor="lightblue" cellspacing="5"
cellpadding="5"><tr>
<td style="border:3px solid white;">
在这里输入内容
</td></tr></table>

说明：

1.Border-left-style:solid (double, groove, ridge, inset, outset)边框样式

2.border-width:框的高度pt

3.border-color:颜色

4.Border-left-color: #xxxxxx边框颜色

颜色的代码回头补上

5.Border-left-width: 数字pt 边框粗细

一． 中空围边

<table border="1" bordercolor="royalblue" cellspacing="1" cellpadding="4"><tr><td>
在这里输入内容
</td></tr></table>

0f4434dd4b55a1d88c1029e3

二  深浅色围边 

<table style="border:1px solid royalblue;" cellpadding="4" cellspacing="4">
<tr><td style="border:1px solid lightblue;">
<font size="2">在这里输入内容</font></td></tr>
</table>

0f4434dd4b55a1d88c1029e3

三 幻彩围边

<table style="border:1px solid red;" cellpadding="4" cellspacing="4"><tr>
<td style="border:1px solid black;">
<font size="2">在这里输入内容</font><font size="1">
</td></tr></table>

0f4434dd4b55a1d88c1029e3

四． 点线深浅色

<table style="border:2px dotted royalblue;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted lightblue;">
<font size="2">在这里输入文字</td></tr></table>

0f4434dd4b55a1d88c1029e3

五．点线幻彩

<table style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted deepskyblue;">
<font size="2">在这里输入文字</font></td></tr>
</table>

0f4434dd4b55a1d88c1029e3

六．波浪形

<table style="border:1px dashed deepskyblue;" cellspacing="5"
bgcolor="deepskyblue" cellpadding="5"><tr><td style="border:1px dashed white;"
 bgcolor="white">
<font size="2">在这里输入文字</font>
</td></tr></table></td>
</tr>
</table>

0f4434dd4b55a1d88c1029e3

七． 粗线彩虹

<table cellpadding="4" cellspacing="0" style="border:double 5px plum;">
<tr><td style="border:double 5px lightblue;">
<font size="2">在这里输入文字 </font>
</td></tr></table>

 0f4434dd4b55a1d88c1029e3

八．细线彩虹

<table style="BORDER-RIGHT: dodgerblue 3px double;
BORDER-TOP: dodgerblue 3px double;
BORDER-LEFT: dodgerblue 3px double;BORDER-BOTTOM:
dodgerblue 3px double" cellSpacing="0"
cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: lightblue 3px double;
BORDER-TOP: lightblue 3px double;
 BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: dimgray 1px solid;
BORDER-TOP: dimgray 1px solid;
 BORDER-LEFT: dimgray 1px solid; BORDER-BOTTOM:
 dimgray 1px solid; BACKGROUND-COLOR: white"
cellPadding="7">
<tr><td><font size="2">在这里输入文字
</font></td>
</tr></table></td></tr>
</table></td>
</tr></table>

0f4434dd4b55a1d88c1029e3

九．幻彩背景色

<table style="BORDER-RIGHT: lightblue 3px double;
 BORDER-TOP: lightblue 3px double;
BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" height="100"
cellPadding="2" width="150">
<tr><td style="BORDER-RIGHT: plum 3px double;
BORDER-TOP: plum 3px double; BORDER-LEFT:
plum 3px double; BORDER-BOTTOM: plum 3px double;
 BACKGROUND-COLOR: aliceblue">
<p align="center">在这里输入内容</td></tr></table>

0f4434dd4b55a1d88c1029e3

十．圆点围边型

<table style="BORDER-RIGHT: plum 1px solid;
BORDER-TOP: plum 1px solid; BORDER-LEFT:
 plum 1px solid; BORDER-BOTTOM:plum 1px solid"
 height="100" cellPadding="5"
width="100" bgColor="#eee0e5"><tr>
<td style="BORDER-RIGHT: orchid 4px dotted;
BORDER-TOP: orchid 4px dotted;
BORDER-LEFT: orchid 4px dotted;BORDER-BOTTOM:
 orchid 4px dotted" bgColor="white">
<font size="2">在这里输入内容</font>
</td></tr></table>

0f4434dd4b55a1d88c1029e3

十一． 双层双色花边型

<table style="BORDER-RIGHT:
lightblue 1px dashed; BORDER-TOP:
lightblue 1px dashed;
 BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="5" cellPadding="3"
 bgColor="lightblue">
<tr><td style="BORDER-RIGHT: lightcyan
1px dashed; BORDER-TOP: lightcyan 1px
 dashed;
 BORDER-LEFT: lightcyan 1px dashed;
 BORDER-BOTTOM: lightcyan 1px dashed"
bgColor="lightcyan">
<table><tr>
<td style="PADDING-RIGHT: 6px;
PADDING-LEFT: 6px; PADDING-BOTTOM: 6px;
 PADDING-TOP: 6px" bgColor="white">
<font size="2">在这里输入文字
</font></td></tr>
</table>
</td>
</tr></table>

0f4434dd4b55a1d88c1029e3

 十二．虚线花边型

<table style="BORDER-RIGHT:
lightblue
1px dashed; BORDER-TOP: lightblue
1px dashed;
BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="3" cellPadding="4"
bgColor="lightblue"><tr>
<td style="BORDER-RIGHT: white
1px dashed; BORDER-TOP: white 1px dashed;
BORDER-LEFT: white 1px dashed;
BORDER-BOTTOM: white 1px dashed">
<font size="2">在此输入内容
</font></td>
</tr></table>

0f4434dd4b55a1d88c1029e3

十三． 双层带标题

标题
<table style="BORDER-RIGHT:
lightblue 1px solid; BORDER-TOP:
lightblue 1px solid; BORDER-LEFT:
lightblue 1px
solid; BORDER-BOTTOM: lightblue 1px
 solid" cellSpacing="5" cellPadding="4">
<tr><td style="BORDER-RIGHT: lightblue
1px dashed; BORDER-TOP: lightblue 1px
dashed; BORDER-LEFT: lightblue 1px
dashed; BORDER-BOTTOM: lightblue 1px
dashed" bgColor="lightblue"><font size="2">
标题</font></td></tr><tr>
<td><font size="2">在这里输入内容</font>
</td></tr></table>

0f4434dd4b55a1d88c1029e3

十四．彩色标题

＊　　　标题　　　＊
<table><tbody><tr>
<td>
<div style="border:1px
 solid #666;
background:#add8e6;
font-size:13px;
color:#666">
<div style="
border-bottom:1px
solid
 #fff;padding:3px" align="center">
＊　　　标题　　　＊
</div><div style="
border-top:1px
dashed #999;background:#fff;
padding:10px" align="left">
在这里输入文字
</div></div>
</td></tr></tbody>
</table>

0f4434dd4b55a1d88c1029e3

十五．彩色点线

<TABLE border="0" cellpadding="0"
 cellspacing="0" width="120"
 height="50" bgcolor="#ffd9e6"
align=center>
<TR><TD><TABLE border="0"
cellpadding="5" cellspacing="0"
width="100%"
 height="100%" style="
border:dotted 4px hotpink;">
<TR><TD bgcolor="white">
<font size="2">在这里输入文字
</font></TD></TR>
</TABLE>
</TD></TR>
</TABLE>

0f4434dd4b55a1d88c1029e3

十六．分行

分行
分行
分行
分行

 代码：

<TABLE border="0" style="border:
solid 1px hotpink;" bgcolor="white">
<TR><TD>
<TABLE border="0" style="border:
dotted 1px pink;">
<TR><TD align="center">
<TABLE border="0" cellpadding="3"
cellspacing="3" width="100%">
<TR><TD style="border-bottom:dotted
 1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>                                  

0f4434dd4b55a1d88c1029e3

说明：

1.Border-left-style:solid (double, groove, ridge, inset, outset)边框样式

2.border-width:框的高度pt

3.border-color:颜色

4.Border-left-color: #xxxxxx边框颜色

颜色的代码回头补上

5.Border-left-width: 数字pt 边框粗细

dtxzhs
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
9个很棒的CSS边框技巧
web前端入门基础进阶教程-htmlcssjs
05-18 2184
如果您是前端开发人员，那么几乎每天都会使用CSS边框。我发现了一些可以在您的项目中使用的有用的技巧。 开始吧！ 1. 动画CSS边框 当我们想使我们的项目更可见时，该怎么办？ 来给它做个动画！ 我们可以对我们的边框进行动画化处理，甚至在不改变元素大小的情况下也可以进行动画化处理，非常简单。 要做到这一点，我们只需要为动画创建一个自定义的关键帧（keyframe），并在元素的CSS代码中的动画（animation）参数中使用它。 让我们看一个例子，HTML如下 <div id="box"> .
CSS 边框样式
天空之外
09-24 2769
本节我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。 关于边框样式的四个属性： 属性 描述 border-width 设置边框的宽度 border-style 设置边框的样式 border-color 设置边框的颜色 border 在一个声明中设置所有的边框属性 border-width border-width 属性用于设置边框的宽度，
你是这样的 CSS，19个唯美的边框
粉丝们务必加入微信粉丝群
11-12 2万+
作者：niemvuilaptrin 译者：前端小智 来源：medium 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 今天，分享一波唯美的边框，可增加我们的项目"亮"点，让用户爱起来。 渐变边框动画 事例地址：https://codepen.io/mike-schultz/pen/NgQvGO CSS Animati.
css 好看的边框
c_qianxia5040的博客
10-18 746
斜线边框可以给页面元素增加一份生动感。可以使用linear-gradient()函数来设置。
你是这样的 CSS，19个唯美的边框，【文末福利】
最新发布
m0_60721695的博客
04-02 526
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件VUE组件库级组件封装-高复用弹窗组件。
css酷炫边框
u014722196的博客
04-01 715
【代码】css酷炫边框。
css圆角边框
jjlome的博客
11-20 142
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--在css3中，新增了圆角边框样式，这样我们的盒子可以变圆了--> <!--border-radius 属性用于设置元素的外边框圆角-->
CSS3边框动画
09-13
CSS3中的`border`属性允许我们为元素定义边框的宽度、样式和颜色。通过结合`transition`和`animation`属性，我们可以创造出各种动态的边框效果。`transition`用于平滑地改变一个或多个属性，而`animation`则可以定义...
css控制表格细边框样式
09-25
在网页设计中，CSS（Cascading Style Sheets）是一种强大的工具，用于定义和控制页面元素的外观和布局。...总之，通过灵活运用CSS，我们可以完全定制表格的细边框样式，打造符合设计需求的美观表格。
用CSS样式描述表格Table边框
09-25
在处理边框样式冲突时，W3C定义了一些规则，如隐藏边框优先，无样式边框最低优先级，以及不同宽度和样式的边框优先级。 总的来说，CSS提供了丰富的工具来定制表格的边框，包括颜色、样式、宽度和间距等，允许设计师...
CSS表格边框50多种精美标签样式(边框也精彩)
07-30
CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用，几乎都是标签样式
div+css做的漂亮的框框
05-09
效果预览 http://www.lzlu.com/Google/js/box/box.html以前刚刚学div css的时候老不知道这种漂亮的框该如何布局今天心血来潮，扒了EXT瞧了瞧，原来这么简单放在这里，嘿嘿，不要笑话只是希望没搞过的人不要走弯路了
CSS样式简单实现Table没有外边框只有内边框
09-25
通过上述CSS样式，我们可以看到表格没有了外边框，只保留了内部单元格之间的1像素深灰色内边框。 总结来说，实现"Table没有外边框只有内边框"的效果主要依赖于以下几点CSS技巧： 1. 使用`border-collapse: collapse...
css唯美边框
Jie0817的博客
11-16 1349
<div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div> html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; height: 100%; background: #1D1F20; }...
css好看的边框
c_qianxia5040的博客
03-17 2602
效果图：缝纫线 outline: 1px blue dashed; outline-offset:-5px; 内圆角 outline: 1px blue dashed; outline-offset:-5px; border-radius:10px; box-shadow:0 0 0 5px transparent; 信封 padding:5px; border: 5px solid transparent; background: linear-gradient(white,white)
有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量
热门推荐
Ethan's Blog
07-03 2万+
让css 把border变得花哨起来
CSS边框样式详解
大河之犬的博客
09-29 4174
下面详细介绍一下`border-width、border-style`以及`border-color`属性
CSS图片边框与样式入门教程
本文档主要介绍了CSS图片效果和图片样式，特别是关注于利用CSS+DIV技术来美化网页中的图片。CSS全称为层叠样式表（Cascading StyleSheet），是一种标记性语言，用于控制网页的外观和布局，将样式信息与网页内容分离...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值