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

本文目录

• 【css】边框border的属性和使用方法
• css---border的注意点
• css border=1什么意思
• 什么是css边框
• css border有几种样式
• 如何在css样式上的属性中添加border

【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的注意点

div{widht:100px;height:100pxborder-width:2px;}

上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box;’，它在页面中实际宽度 = width+border( 该公式仅针对上面例子）。

border-image-source背景图片源

border-image-slice需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来

border-image-width图片边框的宽度。

border-image-outset边框图像区域超出边框的量。

border-image-repeat图片的填充形式

这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。

这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中 image 不失真即不拉伸，slice 要和 width 一样。

例如：

.demo{border-width:20px;border-image-slice:20;}
.demo2{

    width: 100px;

    height: 100px;

    background: #ccc;

    border-width: 20px;

    border-style: solid;

    border-image-source: url(./../img/border-image.jpg);

    border-image-slice:20;

    border-image-outset:22px;

    border-image-repeat: repeat;

}

order-image 使用时候一定要设定 border-style 虽然这个属性没什么用，但是如果不设定它 border-image 就不生效。

border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。

border-width 用来设定边框的宽度，它决定图片边框展示的厚度(即围绕宽度)。

不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。

如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。

在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。

border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden;

任何元素都可以使用这个属性,包括视频、音频标签等。

一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。
使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。

效果如下图

它主要用来告诉浏览器怎么计算元素的展示宽高的。

推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。

css border=1什么意思

HTML语句中“border=1”是边框为1像素的意思。

border 是 CSS 的一个属性，用 border 可以给能确定范围的 HTML 标记（如 TD、DIV 等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。

一、border-width:thin medium thick 10px;

上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框。

二、border-width:thin medium thick;

上边框是 10px，右边框和左边框是中等边框，下边框是粗边框。

三、border-width:thin medium;

上边框和下边框是细边框，右边框和左边框是中等边框。

四、border-width:thin;

所有 4 个边框都是细边框。

扩展资料：

边框其他样式：

none定义无边框。

solid定义实线。

dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

double定义双线。双线的宽度等于 border-width 的值。

groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge定义 3D 垄状边框。其效果取决于 border-color 的值。

inset定义 3D inset 边框。其效果取决于 border-color 的值。

outset定义 3D outset 边框。其效果取决于 border-color 的值。

inherit规定应该从父元素继承边框样式。

参考资料：百度百科-border

什么是css边框

元素的边框(border)是围绕元素内容和内边距的一条或多条线.
css border属性允许你规定元素边框的样式，宽度和颜色.
css边框:在html中，我们使用表格来创建文本周围的边框，但是 通过使用css边框属性，
我们可以创建出效果出色的边框，并且可以应用于任何元素,
元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色。

css border有几种样式

border后加三个参数：边框粗细　边框样式　边框颜色
如border:2px solid #ccc;
其中边框样式包括：
none定义无边框。
solid定义实线。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。
　

如何在css样式上的属性中添加border

定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

• border-width

• border-style

• border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

默认值：

• not specified    

继承性：

• no    

版本：

• CSS1    

JavaScript 语法：

• object.style.border=“3px solid blue“    

可能的值

值

描述

border-width    规定边框的宽度。参阅：border-width 中可能的值。    

border-style    规定边框的样式。参阅：border-style 中可能的值。    

border-color    规定边框的颜色。参阅：border-color 中可能的值。    

inherit    规定应该从父元素继承 border 属性的设置。    

TIY 实例

• 所有边框属性在一个声明之中

• 本例演示用简写属性来将所有四个边框属性设置于同一声明中。