[CSS]如何使用边框!边框名称和类型(可提供样品)

“根据边框的宽度,布局可能会崩溃。”
“我经常使用边界规范,但不确定何时可以使用。”

这是初学者普遍的问题。了解“边界”至关重要,因为它是使用CSS设计Web时经常使用的属性。设置本身很容易,但是与伪元素结合使用以及简单使用时,需要一些习惯。实际上,很高兴能够满足将其与其他CSS属性结合使用的需求。

因此,在本文中,我们不仅要使用它,还要实际使用“边框”进行一些设计。本文是为初学者编写的,因此有经验的用户可以跳过。

[也推荐][对于初学者]仔细解释如何编写CSS(样式表)

什么是边界

“边框”属性具有在元素边界上绘制边框的效果。例如,使用“边框”设计以下按钮。您可以仅使用背景颜色来表示元素的边界,但也可以指定边界的大小和颜色。

<button type="button" class="btn">ボタン</button>
.btn{
border: 3px 固体 #eb6101;
background: #fbd26b;
padding: 20px;
text-align: center;
width: 30%;
margin: 100px auto;
font-size: 17px;
}

标题设计中也使用了边框。您还可以通过指定顶部,底部,左侧或右侧来指定边界。

<h1>見出し</h1>
h1{
border-left: 5px 固体 #df7163;
border-bottom: 1px 固体 #df7163;
padding-left: 10px;
}

如您所见,边框有很多用途。实际上,利用边框的特征可以进行各种设计。让我们看看如何立即使用它。

如何使用边框

“边框”属性使您可以分别指定顶部,底部,左侧或右侧,此外,还可以分别指定线的大小,类型和颜色。但是,一般而言,建议使用一种立即指定所有方法的方法。

值没有固定的顺序,因此您可以更改顺序。让我们仔细看看设置。

边框类型

“边界”行不限于单行。实际上,有八种线型可用。下面,为了清楚起见,将线粗设置为“ 10px”。

固体

实体显示一行。

.btn{
border: 10px 固体 #eb6101;
}

双显示两行。

.btn{
border: 10px 双 #eb6101;
}

虚线

虚线显示虚线。

.btn{
border: 10px 虚线 #eb6101;
}

点缀

点线显示虚线。

.btn{
border: 10px 点缀 #eb6101;
}

凹槽会产生三维线。它还显示一条虚线。

.btn{
border: 10px 槽 #eb6101;
}

脊有三维线。另外,显示线状部分被抬起的线状部分。

.btn{
border: 10px 岭 #eb6101;
}

插图

插图具有三维线。另外,左右两边的线条是明亮的,而上下两边的线条是深色的,就像光线从右下角射入一样。

.btn{
border: 10px 插图 #eb6101;
}

一开始

一开始有一条三维线。此外,左侧和顶部线条很亮,而右侧和底部线条很暗,就像光线从左上方照射一样。

.btn{
border: 10px 一开始 #eb6101;
}

厚度类型

可以使用三种类型的线宽。但是,通常通常用“ px”等来指定。

细显示一条细线。

.btn{
border: 瘦 固体 #eb6101;
}

介质显示标准行。

.btn{
border: 中 固体 #eb6101;
}

粗线显示粗线。

.btn{
border: 厚 固体 #eb6101;
}

批次规格和个别规格

批处理说明很常见,但是有时您需要分别指定顶部,底部,左侧和右侧框架。当时提供了属性。

个别属性 描述
边框宽度 设置顶部,底部,左侧和右侧线条的宽度。
边框样式 设置上下左右的线型。
边框颜色 设置顶部,底部,左侧和右侧线条的颜色。
边界半径 设置右上角,左上角,右下角和左下角的大小。

单独指定时

您可以如下所示分别指定线的大小,类型和颜色。

.btn{
border-color: #eb6101;
border-width: 10px;
border-style: 固体;
border-radius: 10px;
}

但是,如果您敢于单独指定,可能会在许多情况下在顶部,底部,左侧和右侧指定每个零件。通常,没有类似以下的描述,但是请记住,您可以为顶部,底部,左侧和右侧的每一个指定尺寸,宽度和类型。

.btn{
border-top-color: #b8d200;
border-left-color: #ee827c;
border-bottom-color: #2ca9e1;
border-right-color: #884898;
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;
border-top-style: 固体;
border-right-style: 虚线;
border-bottom-style: 点缀;
border-left-style: 双;
}

框大小:使用边框

现在,让我们稍微关注边框的宽度,并讨论一下设计。通过设置边框的厚度,根据指定的宽度,整个宽度的长度可能不正确。换句话说,子元素的宽度由父元素的宽度确定为100%,但是通过设置边框,可能会超出父元素的宽度。

在下面的示例中,元素宽度(60%)+填充总计(30%)+边框宽度(6%)+边距总计(10%)= 106%

为了避免这种情况,提供了“ box-sizing”。 ``box-sizing''有三个可能的值。

个别属性 描述
框大小:内容框; 请勿在宽度中包括边框和填充。
框大小:border-box; 在宽度中包括边框和填充。
大小调整:继承; 如果父元素也有一个边框,它将被继承。

但是,要使用的值是“边框”。这是通过在宽度范围内包括填充和边框宽度来计算的。

让我们实际检查一下。以下是HTML。

<div class="box">
<div class="inside-box">サンプル</div>
</div>

在CSS中,父元素的宽度设置为400px。

.box{
border: 1px 固体 #df7163;
background: ;
width: 400px;
height: 100px;
}

现在,让我们将子元素的宽度设置为100%。

.box{
border: 1px 固体 #df7163;
background: ;
width: 400px;
height: 100px;
}

.inside-box{
width: 60%;
padding: 4% 10%;
margin: 4% 10%;
text-align: center;
background: #df7163;
}

它将显示如下。

每个的宽度如下。父元素的宽度是通过将所有宽度相加而获得的。

现在让我们在此处设置边界,并将宽度设置为5px。顺便说一句,不能为边框宽度指定“%”。

.box{
border: 1px 固体 #df7163;
background: ;
width: 400px;
height: 100px;
}

.inside-box{
width: 60%;
padding: 4% 10%;
margin: 4% 10%;
text-align: center;
background: #df7163;
border: 10px 固体 #0000cd;
}

显示如下。

如果计算宽度,则可以看到它超过了400像素。 (420px)

现在,在此处添加“ box-sizing:border-box;”。

.box{
border: 1px 固体 #df7163;
background: ;
width: 400px;
height: 100px;
}

.inside-box{
width: 60%;
padding: 4% 10%;
margin: 4% 10%;
text-align: center;
background: #df7163;
border: 10px 固体 #0000cd;
框大小:border-box;
}

结果,您可以看到宽度(400px x 60%= 240px)包括填充和边框宽度。

或者,使用“ margin:@@ px auto;”代替“ box-sizing:border-box;”来自动调整边距的宽度。

练习:让我们使用边框

现在,让我们使用“边框”进行一些设计。

练习:让我们制作一个气球!

井喷由一个盒子和一个三角形组成。首先,如下设置HTML。

<div class="fukidashi">吹き出し</div>

首先,为该类创建一个框。

.fukidashi{
border: 1px 固体 #006dd9;
background: #006dd9;
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
}

然后,将显示以下框。

现在,让我们在此处使用边框和伪元素添加一个气球。为此,请为“ .fukidashi”设置“ position:relative;”,并为伪元素“ .fukidashi :: after”设置“ position:absolute;”。

.fukidashi{
border: 1px 固体 #006dd9;
background: #006dd9;
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
position: relative;
}

.fukidashi::after {
content: "";
position: absolute;
}

这就是边界的来源。首先,使用“ border:20px 固体;”创建不包含任何元素的简单线。这将创建一个正方形。此时,没有指定颜色,但是任何颜色都是可以接受的。接下来,仅用“ border-top:20px 固体#006dd9;”指定顶行。

.fukidashi{
border: 1px 固体 #006dd9;
background: #006dd9;
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
position: relative;
}

.fukidashi::after {
content: "";
position: absolute;
border:20px 固体;
border-top: 20px 固体 #006dd9;
}

显示如下。

在此,指定的“边框:20像素纯色;”颜色将用“边框颜色:透明;”抹去。结果,将仅保留“ border-top:20px 固体#006dd9;”。然后移动此元素。

.fukidashi{
position: relative;
border: 1px 固体 #006dd9;
background: #006dd9;
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
}

.fukidashi::after {
content: "";
position: absolute;
top:60px;
left: 50%;
margin-left: -10%;
border:20px 固体;
border-color:transparent;
border-top: 20px 固体 #006dd9;
}

然后,完成使用边框的气球。

练习:让我们在包装盒上贴上标签!

这是通过结合“边界”和“位置”来实现的。用以下标签制作一个带有标签的盒子。

首先,准备一个框以将字符放入HTML。

<div class="label">
<span class="small-label">LABEL</span>
<p>box内に小さなlabelを<br>作ってみましょう。</p>
</div>

接下来,首先在CSS中指定“边框”。根据需要调整宽度。

.label{
border: 2px 固体 #006dd9;
width: 25%;
}

.label p{
text-align: center;
padding: 15px 5px;
}

此时,显示如下:

在这里,我们也为“小标签”类设置“边框”。但是,您可以仅使用“背景”设置背景颜色。另外,指定“填充”以增加“小标签”的高度和宽度。

label{
border: 2px 固体 #006dd9;
width: 25%;
}

.label p{
text-align: center;
padding: 15px 5px;
}

.small-label{
background: #006dd9;
padding: 3px 10px;
color: #fff;
}

显示如下。

最后,使用“位置”更改“小标签”的位置。为父元素“ label”设置“ position:relative;”,为子元素“ .small-label”设置“ position:absolute;”,并分别为“ top”和“ left”设置“ 0”。我是。

.label{
border: 2px 固体 #006dd9;
width: 25%;
position: relative;
}

.label p{
text-align: center;
padding: 15px 5px;
}

.small-label{
background: #006dd9;
padding: 3px 10px;
color: #fff;
position: absolute;
top: 0;
left: 0;
}

完成以下设计。

顺便说一句,基于我刚创建的“边框”和“位置”,以下显示也是可能的。

您所要做的就是用“ position”更改位置,如下所示,并更改文本和背景的颜色。

.small-label{
background: #fff;
padding: 3px 10px;
color: #006dd9;
position: absolute;
top: -15px;
left: 5px;
}

概要

border是网页设计中经常使用的CSS属性。确保掌握以下几点。

  • 边框的宽度,类型和颜色可以单独设置,但实际上,一次将它们全部设置是很常见的。
  • 边框可以设置为顶部,底部,左侧或右侧。
  • 设置边框的宽度时,必须小心,因为它可能超过父元素的宽度。在这种情况下,有一种方法可以设置“ box-sizing:border-box”或在页边距的左右两侧指定“ auto”,以便不超过父元素的宽度。
  • 边框可以与“位置”属性一起用于各种设计。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。