CSS边框

CSS边框属性

CSS边框属性允许你指定边框的样式，宽度，和颜色。

每个边都有边框

底部红色边框

我有一个圆角边框

我有一个蓝色左边框

边框样式

border-style 属性指定要显示的边框类型.

允许以下值：:

• dotted - 定义了一个点边框
• dashed - 定义一个虚线边框
• solid - 定义了一个实线边界
• double - 定义了一个双边框
• groove - 定义了一个三维有槽的边界. 效果取决于边框颜色border-color值.
• ridge - 定义一个三维凸起边框. 效果取决于边框颜色border-color值.
• inset - 定义一个三维凹陷边框. 效果取决于边框颜色border-color值.
• outset - 定义一个三维外突边框. 效果取决于边框颜色border-color值.
• none - 没有边框
• hidden - 隐藏边框

border-style 属性可以从一到四个值(顶边框, 右边框, 底边框和左边框).

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

让我试试

注意: 他的CSS边框属性下面的描述都会有何影响除非边框样式属性设置！

边框宽度

border-width 属性指定四个边框的宽度.

宽度可以设置为一个特定的尺寸 (in px, pt, cm, em, etc) 或使用三个预定义值中的一个: thin, medium, 或者 thick.

border-width 属性可以从一到四个值 (顶，右，底，左).

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

让我试试

边框颜色

border-color属性用于设置四个边框的颜色..

颜色可以设置:

• 名称 - 例如： "red"
• 16进制值 - 例如： "#ff0000"
• RGB - 例如： "rgb(255,0,0)"
• 透明度

border-color 属性可以从一到四个值 (顶，右，底，左).

border-color 没有设置，它继承了父元素的颜色。

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

让我试试

边框 - 单独设置

从上面的示例中，您可以看到为每个边指定一个不同的边框.

在CSS中，也有具体的边框属性(顶，右，底，左).

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

让我试试

上面的例子给出了同样的结果：

p {
    border-style: dotted solid;
}

让我试试

那么，他们是如何工作的呢？

如果 border-style 属性有4个值：

• border-style: dotted solid double dashed;
  • 顶边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed

如果 border-style 有三个值：

• border-style: dotted solid double;
  • 顶边框是 dotted
  • 左右边框是 solid
  • 底边框是 double

如果 border-style 属性有两个值：

• border-style: dotted solid;
  • 顶底边框是 dotted
  • 左右边框是 solid

如果 border-style 属性有一个值:

• border-style: dotted;
  • 四个边框都是dotted

上面实例中的border-style 属性. 同样适合 border-width 和 border-color.

边框 - 缩写属性

正如你从上面的例子中看到的，在处理边界时有许多属性可以考虑这样处理.

使用简写方式, 也可以在一个属性中指定所有单独的边框属性.

border 属性是下列单个边框属性的简写属性：

• border-width
• border-style (必须的)
• border-color

p {
    border: 5px solid red;
}

让我试试

还可以仅为一个边的指定所有单独边框属性.

左边框

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

让我试试

底边框

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

让我试试

圆角边框

border-radius 属性用来给元素添加圆角边框:

正常边框

圆角边框

比较圆的圆角边框

最圆的圆角边框

p {
    border: 2px solid red;
    border-radius: 5px;
}

让我试试

注意：border-radius属性不支持IE8及更早版本。

所有的CSS边框属性