扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
为元素设置边框
创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为绥棱企业提供专业的成都网站设计、成都网站建设，绥棱网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
可选值：
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
示例:
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
指定的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表示表格的两边框合并为一条即可。
用了JQ库，样式在style里，不过要配合js用
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
script src="jquery-3.3.1.min.js"/script
/head
style
.div1{
text-align: center;
background: beige;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span1{
/* margin-top: 7px; */ /* div的时候打开注释 */
background: #CCCCCC;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.div2{
text-align: center;
background: lawngreen;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span2{
background: white;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.hid1{
display: none;
}
.hid2{
}
/style
body
!-- button的 --
button class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/button
hr
hr
!-- div的 --
!-- div class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/div --
/body
script
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2");
$(".div1").toggleClass("div2");
$(".hid1").toggle();
$(".hid2").toggle();
})
})
/script
/html
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：
元素的边框(border)是围绕元素内容和内边距的一条或多条线.
css border属性允许你规定元素边框的样式，宽度和颜色.
css边框:在html中，我们使用表格来创建文本周围的边框，但是 通过使用css边框属性，
我们可以创建出效果出色的边框，并且可以应用于任何元素,
元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网