乐趣区

关于前端:零基础教你学前端69CSS-边框

咱们学习如何利用 CSS 给元素增加边框。

CSS 边框属性,容许咱们指定一个元素边框的款式、宽度和色彩。

咱们先来学习元素边框的款式。border-style 属性指定了要显示什么样的边框。容许应用以下的值:

dotted,定义一个点状的边框

dashed,定义一个虚线边框

solid,定义一个实线边框

double,定义一个双倍的边框

none,定义无边框

hidden,定义一个暗藏的边框

咱们来试验一下。

创立一个 009-css-borders 文件夹,在文件夹里创立一个 css-borders.html 文件和一个 border-style.css 文件。

构建 html 根底代码,引入款式文件。

编写 p.dotted 回车,填入文本点状的边框。依照同样的办法,增加其余的几个边框构造。

<p> 点状的边框 </p>

<p> 虚线边框 </p>

<p> 实线边框 </p>

<p> 双倍的边框 </p>

<p> 无边框 </p>

<p> 暗藏的边框 </p>

<p> 混合边框 </p>

<p> 速记边框 </p>

在 css 里定义 p.dotted 选择器,申明款式 border-style: dotted。定义其余几个选择器,全副申明 border-style 属性,值别离为:dashed、solid、double、none、hidden。

在浏览器里查看后果,边框的成果都做好了。

border-style: none 和 border-style: hidden 视觉上都不显示边框,有什么区别呢?

在 html 里编写:table 大于 括号 tr 大于 td 乘以 3 再乘以 3(table>(tr>td3)3)。回车,创立一个 3 行 3 列的表格。给 table 元素定义 border 属性,值为 1。给第二行第一个和第二个 td 定义 class 属性,值别离为 lm、m。

在 css 里定义 table 选择器,申明款式 border-collapse: collapse,让表格线细一些。这个属性咱们在前面会具体解说。

定义 td.lm 选择器,申明款式 border-style: dashed。定义 td.m 选择器,申明款式 text-align: center。

看一下成果,左中和左上、中以及左下边框是相邻的,在这些单元格上定义边框款式肯定会产生抵触。

给 td.m 选择器增加款式申明 border-style: none。

咱们看,没有去掉任何边框。

再把 border-style 属性值改为 hidden。

咱们再看,两头的 td 边框隐没了,当然,左侧相邻的边框也隐没了。

当表格单元格相邻边框产生抵触时,border-style: hidden 优先级最高,border-style: solid 优先级次之,border-style: none 优先级最低。

还是这个表格示例,单元格左中和中之间用点线来分隔。如何实现呢?

在 td.m 选择器里将 border-style 的值改为 dotted。

很显然,并不是咱们要的成果。看来,得把单元格左中的左边线暗藏。如何管制一条边框线呢?

能够在 border-style 两头增加一个示意方位的词,就能够设置单个边框线了。

比方,给 td.lm 选择器申明 border-right-style 属性,就能够设置这个单元格左边框款式了,这里设置的值为 none。

成果实现了。

把这里的 border-right-style 的值设置为 hidden 是什么成果呢

通过这个例子发现,能够别离指定每个边框的款式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style,用来设置元素的上、右、下、左边框的款式。

除了单个款式属性外,border-style 的属性值,还能够应用混合的简写办法。有四种写法:

第一种写法:四个值,别离代表上边、左边、下边、右边的边框款式。从顶部开始,依照顺时针方向来设置值。比方 border-style: dotted solid double dashed,设置上边框为虚线、左边框为实线、下边框为双线、左边框为虚线。

第二种写法:三个值,别离代表上边、左右边、下边的边框款式。第一个值示意上边框的款式、第二个值示意右边和左边框的款式,第三个值示意下边框的款式。比方 border-style: dotted solid double,设置顶部边框为虚线、左右边框为实线,底部边框是双线。

第三种写法:两个值,别离示意上下边,左右边的边框款式。第一个值示意高低边框的款式、第二个值示意左右边框的款式。比方 border-style: dotted solid,设置顶部和底部的边框是点状的、左边和右边的边框是实心的。

第四种写法:一个值,示意四个边框的款式。比方 border-style: dotted,四个边都是点状边框。

在 html 里增加一个 p 元素,定义 属性。填入一些文本。

在 css 里定义 p.mix 选择器,申明款式 border-style: dotted dashed solid double。

最初一个段落的混合边框实现了。

除了设置边框款式,还能够设置边框的宽度。

border-width 属性用于设置四个边框的宽度。宽度能够被设置为一个特定的尺寸,以 px、em 等为单位,或者应用三个预约义的值:thin、medium、thick——薄、中、厚。

给前三个 p 元素全副申明 border-width 款式属性,值别离为 5px,0.5em,thick。

三个段落的边框线宽度就增加好了。

和边框款式 border-style 属性一样,边框宽度的值也能够应用混合的简写办法,能够给 border-width 设置四个值、三个值、两个值或一个值。

给第四个 p 元素增加 border-width: 5px 10px; 款式。

咱们看,这个边框宽度高低是 5 像素,左右是 10 像素。

再给最初一个 p 元素增加 border-width: 2px 3px 4px 5px 款式。

这样,四边不同的边框,就领有了不同的宽度!

除了设置边框款式,还能够设置边框的色彩。

border-color 属性用于设置四个边框的色彩。能够通过色彩名称、十六进制色彩值、RGB 色彩值来设置色彩,也能够通过 transparent 来设置通明。

给前三个 p 元素全副申明 border-color 款式属性,值别离为 red,#00ff00,rgb(0, 0, 255)。

三个段落的边框线色彩就增加好了。

和边框款式 border-style 属性一样,边框色彩的值也能够应用混合的简写办法,能够给 border-color 设置四个值、三个值、两个值或一个值。

给第四个 p 元素增加 border-color: purple orange 款式。

咱们看,这个边框高低是紫色,左右是橙色。

再给最初一个 p 元素增加 border-color: red green blue yellow 款式。

这样,四边不同的边框,就领有了不同的色彩!

和字体 font 属性一样,边框也能够应用速记属性。为了缩短代码,能够在一个 border 属性中指定 border-style、border-width、border-color 等独自的边框属性。比方:border: 5px solid red,示意设置元素的边框宽度为 5 像素,边框款式为实线,边框色彩为红色。

留神,border-style 是必须要申明的,其余两个能够省略,省略后会采纳 1 像素、彩色线这两个默认值。

在 html 里增加一个 p 元素,定义 属性。填入一些文本。

在 css 里定义 p.shorthand 选择器,申明款式 border: 5px solid #ccc。

一行款式代码就实现了边框款式、宽度和色彩的设置!

这个简写的办法默认四个边,全副定义了雷同的边框。能不能定义单个边呢?能够的!

很天然的猜到,通过申明 border-top,border-right,border-bottom,border-left 四个属性,值为下面简写的形式,就能够独自定义元素的某一条边了。

正文掉这行代码,再申明一个 border-bottom 属性,值同样是 5px solid #ccc。

一行代码,同样实现了一条底部的边框线

文章配套视频链接:https://www.bilibili.com/vide…

退出移动版