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

html-css0154

【css】边框border的属性和使用方法,第1张

顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用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这个位置可选border：四边边框，border-top：顶部边框，类似还有border-left/right/button。

宽度即为边框宽度。

样式有如图：

颜色忽略，如有不清楚的可以参见w3school教程http://www.w3school.com.cn/css/css_border.asp

望采纳

1、打开html开发工具，新建一个html代码页面，然后创建一个

标签，并给这个标签添加文字和一个class为了dashed。创建

代码:

dashed: 定义一个虚线边框

2、设置虚线边框。创建

标签，然后在这个标签里设置dashed类的样式为虚线边框。css样式代码：<style type="text/css">.dashed{border-style:dashedborder-width:1px

3、保存html代码，然后使用浏览器打开，即可看到浏览器页面上显示一个虚线边框。