十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
指定的table为细边框,把table放在div中即可。
创新互联公司专注于吉阳企业网站建设,响应式网站开发,成都商城网站开发。吉阳网站建设公司,为吉阳等地区提供建站服务。全流程按需开发网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
一、首先新建表格,代码如下:
table width="500" border="1" trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css样式,代码如下:
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离,border-collapse:collapse表示表格的两边框合并为一条即可。
1、首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签:
2、然后设置p标签的样式,这里先设置一个边框,然后设置圆角边框,主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值,不可为负值,这里圆角的值越大,圆角的弧度也越大:
3、最后打开浏览器,就可以看到圆角边框了:
border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法:border: border-width | border-style | border-color;
border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。
border-top-width:设置元素上边框宽度
border-right-width:设置元素右边框宽度
border-bottom-width:设置元素下边框宽度
border-left-width:设置元素左边框宽度
border-style :边框样式。
border-top-style:设置元素上边框样式
border-right-style:设置元素右边框样式
border-bottom-style:设置元素下边框样式
border-left-style:设置元素左边框样式
属性值有:
none:无边框。
hidden:隐藏边框。对于表,hidden 用于解决边框冲突。
dotted:点状边框。
dashed:虚线边框。
solid:实线边框。
double:双线边框。两条单线与其间隔的和等于指定的border-width值。
groove:3D凹槽边框。
ridge:3D垄状边框。
inset:凹边框。
outset:凸边框。
border-color :边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同,样式相同
1.4 四条边颜色相同,样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对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: