css相框样式,三种css样式表

css表格的边框线怎么设置

border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。

成都创新互联公司专业为企业提供宝山网站建设、宝山做网站、宝山网站设计、宝山网站制作等企业网站建设、网页设计与制作、宝山企业网站模板建站服务,十多年宝山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:

-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;

-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;

-- inherit:规定应该从父元素继承 border-collapse 属性的值。

双线表格边框的实现

html代码:

table

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

tr

td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td

/tr

/table

css代码:

table,table td{

text-align: center;

border: 1px solid #000;

border-collapse:separate;

}

table td{

padding: 10px 30px;

}

表格边框的双线样式其实很简单,只要同时设置表格外边框和table里的每个单元格的边框,就可以实现了。

因为separate是默认值,就算是不设置border-collapse:separate;表格也会呈现双线效果。

我们主要是来看看border-collapse属性合并边框,实现单线边框的方法,html代码一样,只需设置css样式:

css代码:

table,table tr td {

border: 1px solid #000;

text-align: center;

border-collapse: collapse;

}table tr td {

padding: 10px 30px;

}

单线边框的实现也很简单,它是在双线样式的基础上,设置border-collapse: collapse;

把相邻的两个table边框合并成一个,使得相邻的两条线并在一起,边框就以单线的形式显示了。

总结:表格边框的无论是单线边框样式,还是双线边框样式都在前端页面中应用广泛,大家可以根据自己

怎样用css写出圆形边框

1、首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签:

2、然后设置p标签的样式,这里先设置一个边框,然后设置圆角边框,主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值,不可为负值,这里圆角的值越大,圆角的弧度也越大:

3、最后打开浏览器,就可以看到圆角边框了:

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

对table设置css样式边框,分为几种情况:

1、只对table设置边框

2、对td设置边框

3、对table和td技巧性设置表格边框

4、对table和td设置背景,实现完美表格边框

例如:

.table-a table{border:1px solid #F00}

css 如何用图片改变表单边框的样式(圆角边框,有阴影)

两种效果 一种是把图片做成大的背景

但是这样有局限性 因为这样它不会根据页面的变化而变化了

另一种方法是我推荐的方法

把底部圆角那儿切出来叫top.jpg

底部叫foot.jpg

中间的叫bg.jpg

div style=" background:url(这里是bg.jpg) repeat-y left top"

div这里放head.jpg图片/div

div这里就是你想要写的内容随便放什么都可以的/div

div这里放foot.jpg图片/div

/div

这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的

而且会根据内容的大小而变化。

另一种

文本框用input,input type="text" class="txtnput" value=""/

.txtnput{float: left;width:126px; height:27px;background:url(图片路劲);border:none;}

高度和宽度是你效果图中你需要的那种文本框的大小,背景图片也是你需要的那种框。

按钮也是一样的实现。

【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相框样式,三种css样式表
分享链接:http://pwwzsj.com/article/dsshecg.html