10.css盒子模型-边框常用写法及简写

为元素设置边框

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了苏家屯免费建站欢迎大家使用！

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

可选值：

style也可以分别指定四个边的边框样式，规则和width一致，

同时它也提供border-xxx-style四个样式，来分别设置四个边

示例:

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

而且没有任何的顺序要求

border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

表格细边框的CSS样式怎么设置？

指定的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表示表格的两边框合并为一条即可。

什么是css边框

元素的边框(border)是围绕元素内容和内边距的一条或多条线.

css border属性允许你规定元素边框的样式，宽度和颜色.

css边框:在html中，我们使用表格来创建文本周围的边框，但是 通过使用css边框属性，

我们可以创建出效果出色的边框，并且可以应用于任何元素,

元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色。

怎么做css样式边框？

只是第一种的代码，第二种的话只需要吧div的实线solid改为虚线dashed就可以了

style

#a{ list-style:none;;margin:0px; padding:0px; border:2px solid #000; width:400px;}

#a ul{  margin:0px; padding:0px;}

#a ul li{ list-style:none; height:30px; line-height:30px; border-bottom:2px dashed #000; text-align:center;}

#a ul li.no{list-style:none;border-bottom:0px;}

/style

div id="a"

ul

li写一些文字/li

li写一些文字/li

li写一些文字/li

li class="no"写一些文字/li

/ul

/div

【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 border（边框）样式写法总结

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边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _

分享名称：css样式边框,css样式边框粗细
当前地址：http://kswjz.com/article/dsdesep.html