龙空技术网

8.「入门编程」「CSS教程」=>边框

StudyCenter 155

前言:

眼前兄弟们对“边框css”大约比较关怀,大家都想要剖析一些“边框css”的相关资讯。那么小编同时在网摘上收集了一些对于“边框css””的相关知识,希望你们能喜欢,朋友们快快来学习一下吧!

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。


CSS 边框样式

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

允许以下值:

dotted - 定义点线边框dashed - 定义虚线边框solid - 定义实线边框double - 定义双边框groove - 定义 3D 坡口边框。效果取决于 border-color 值ridge - 定义 3D 脊线边框。效果取决于 border-color 值inset - 定义 3D inset 边框。效果取决于 border-color 值outset - 定义 3D 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;}

结果:


注意:除非设置了 border-style 属性,否则其他 CSS 边框属性都不会有任何作用!

CSS 边框宽度

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

可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick:

实例

演示不同的边框宽度:

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

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

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

结果:


特定边的宽度

border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框):

实例

p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px,其他边为 20px */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px,其他边为 5px */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */
}

CSS 边框颜色

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

可以通过以下方式设置颜色:

name - 指定颜色名,比如 "red"HEX - 指定十六进制值,比如 "#ff0000"RGB - 指定 RGB 值,比如 "rgb(255,0,0)"HSL - 指定 HSL 值,比如 "hsl(0, 100%, 50%)"transparent

注释:如果未设置 border-color,则它将继承元素的颜色。

实例

演示不同的边框颜色:

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

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

p.three {
border-style: dotted;
border-color: blue;
}

结果:


特定边框的颜色

border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

实例

p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}


HEX 值

边框的颜色也可以使用十六进制值(HEX)来指定:

实例

p.one {
border-style: solid;
border-color: #ff0000; /* 红色 */
}


RGB 值

或者使用 RGB 值:

实例

p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 红色 */
}

HSL 值

也可以使用 HSL 值:

实例

p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 红色 */
}

CSS 边框 - 单独的边

从上一章的例子中,您已经看到可以为每一侧指定不同的边框。

在 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 属性设置四个值:

border-style: dotted solid double dashed;上边框是虚线右边框是实线下边框是双线左边框是虚线

如果 border-style 属性设置三个值:

border-style: dotted solid double;上边框是虚线右和左边框是实线下边框是双线

如果 border-style 属性设置两个值:

border-style: dotted solid;上和下边框是虚线右和左边框是实线

如果 border-style 属性设置一个值:

border-style: dotted;四条边均为虚线实例

/* 四个值 */
p {
border-style: dotted solid double dashed;
}

/* 三个值 */
p {
border-style: dotted solid double;
}

/* 两个值 */
p {
border-style: dotted solid;
}

/* 一个值 */
p {
border-style: dotted;
}

CSS Border - 简写属性

为了缩减代码,也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性:

border-widthborder-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;
}

结果:


标签: #边框css