当前位置：首页 > SEO > 网站 > 正文内容

css好看的边框样式~边框样式有哪些

网站15402023-01-19 08:17:50

查看本文收录： 查看是否已被百度收录

百度

搜狗

360

本章目录一览

1、好看的CSS字体和表格样式还有文本框样式，好看的加分，100分。复制原码给我
2、css圆点边框间距太小
3、【css】边框border的属性和使用方法
4、怎么用CSS设置html中的表格边框样式
5、CSS border（边框）样式写法总结
6、CSS盒子模型-圆角边框

好看的CSS字体和表格样式还有文本框样式，好看的加分，100分。复制原码给我

css好看的边框样式~边框样式有哪些第1张

字体最好是用默认的英文verdana不错。文本框样式就不好说，根据页面做个1PX的边框吧。。。

css圆点边框间距太小

在网页前端设计过程中，少不了要使用边框，这样页面整体好看一些。边框通常分为两种，一种为实边框另一种为虚边框，实边框用得多一些，但有虚线或虚线边框点缀，网页会更漂亮，所以这两种边框都要使用。

在CSS中，设置边框用border属性，通常需要设置三个值，分别为：宽度、线条样式和颜色。把线条设置为实线或虚线主要设置线条样式，它主要有两个值，即：solid 和 dashed，前者表示实线，后者表示虚线。

一、CSS设置虚线

html代码：

CSS设置虚线

使用dashed

CSS样式：

.uldashed{border:1px solid #c22159; width:300px; height:60px;margin:0;padding:0; line-height:26px;}

.uldashed li{border-bottom:1px dashed #c22159;list-style:none;}

效果图：CSS设置虚线

使用dashed

以上CSS样式是给ul的每一行设置一条虚线，虚实结合比单用实线好看得多。在实际应用中，最后一行的虚线要隐藏掉，这样美观一些，只要再设置一个CSS样式把 border-bottom 设置为 none 即可。

二、CSS设置虚线边框

html代码：

CSS设置一虚线

使用dashed

CSS样式：

.uldashedborder{border:1px dashed #c22159; width:300px; height:60px;margin:0;padding:0; line-height:26px; padding-bottom:23px;}

.uldashedborder li{border-bottom:1px solid #c22159;list-style:none;}

效果图：CSS设置一虚线

使用dashed

以上的CSS样式是把边框设置为虚线，把行的底部设置为实线，跟上边恰好相反，效果没有上边的好看。一般来说，虚线常常用于实线边框内。

三、CSS 长虚线边框

html代码：

长虚线边框

CSS样式：

.longDashedBorder{position:relative; margin:68px 0 0 130px; height:44px;width:86px; display:inline-block; border:dashed 1px #b200ff; transform:scale(4); overflow:hidden;}

.text{position:relative; margin:-54px 0 0 -106px; float:left; height:150px;width:300px; line-height:28px; display:inline-block; transform:scale(0.28);}

效果图：

ee96bd1776d77c7f7c565d5cc3bf1f47.png

以上长虚线边框用 Css 放大属性 scale 实现，这样虚线会增长但不会加宽；如果只增长 X 轴方向，可以用 scalex；如果只增长 Y 轴方向，可以用 scaley。使用 scale，除放大边框外，还放大其它元素，需要把它们调回来，比较麻烦。

四、CSS 虚线间距

html代码：

CSS样式：

.dashedSpace {

width:350px;

height:1px;

margin-top:10px;

background-image:linear-gradient(to right, #b200ff 0%, #b200ff 50%, transparent 50%);

background-size:28px 1px;

background-repeat:repeat-x;

}

.linear {

background-image: linear-gradient(to right, #ccc 0%, #b200ff 50%, transparent 50%);

background-size:40px 1px;

}

效果图：

03cc24f8ec77382a351b9b73a6a9f5eb.png

dashed 样式的虚线不能调间距，只能用渐变生成函数 linear-gradient()，to right 表示从左到右渐变，#ccc 0% 表示起点颜色和颜色百分比，#b200ff 50% 表示终点颜色和颜色百分比，transparent 50% 表示透明度。

【css】边框border的属性和使用方法

顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。

边框样式border-style必须写！否则其它属性全部失效。

边框的样式：

border后面可跟多个值，中间用空格分离，含义如下：

注意顺序，边框样式不可省略，颜色和宽度可以省略，会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。

我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的背景颜色填充。

点和虚线的具体样式，不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：

我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：

当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用边框组合和 transparent（透明）绘制三角形，可以体验下哦。

三角形1-css：

三角形2-css：

多彩三角形-css：

绘制梯形只要对应添加宽度或者高度就可以啦

梯形1-css：

梯形2-css：

怎么用CSS设置html中的表格边框样式

一、只对表格table标签设置边框 - TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

style.table-a table{border:1px solid #F00} /* css注释：只对table标签设置红色边框样式 */ style

2、对应html代码片段

divclass="table-a"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv

二、对td设置边框 - TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

style.table-b table td{border:1px solid #F00} /* css注释：只对table td标签设置红色边框样式 */ style

2、对应html源代码片段

divclass="table-b"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable

三、对table和td技巧性设置表格边框 - TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

style.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注释：只对table td设置左与上边框；对table设置右与下边框；为了便于截图，我们将css 注释说明换行排版 */ style

2、对应html源代码片段：

divclass="table-c"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable

四、对table和td设置背景，实现完美表格边框 - TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1

使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing="1"即可，得到：

tablewidth="400"border="0"cellspacing="1"cellpadding="0"

3）、设置table td背景为白色

2、css代码：

style.table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注释：设置table背景为红色，td背景为白色 */ style

3、对应html源代码：

divclass="table-d"tablewidth="400"border="0"cellspacing="1"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv

五、css table表格边框实现总结 - TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。