CSS 基础教程：边框（一）

hudson2022
75 阅读5分钟

CSS 基础教程：边框（一）

hudson 译 原文

在设计和造型的背景下，边框是指围绕对象内容的装饰或功能元素，例如文本框、图像或网页上的任何其他HTML元素。“Border”属性用于在元素周围创建边框，例如div、图像或文本。它允许定义边框的外观，包括其颜色、宽度和样式。边框在网页的整体美学和设计中起着至关重要的作用。

边框的重要性

在CSS中使用边框的重要性可以总结如下：

  • 视觉分隔： 边框有助于从视觉上分隔网页上不同的元素，使用户更容易理解布局和导航。
  • 组织和结构： 可以将边框应用于网格、表格等，使内容看起来更有组织和结构。
  • 强调和焦点： 可以为元素添加边框以强调和突出它们。
  • 设计与美学： 边框允许为元素添加装饰，以增强视觉吸引力。可以通过边框的样式、颜色和宽度来实现这一点。

边框 - 属性

下表描述了边框的各种属性、它们的描述以及它们所持有的默认值：

属性描述默认值
style指定边框是实线、虚线、双线或其他可能值之一无
width指定边框的宽度中等
color指定边框的颜色元素的前景色，如果元素为空，则为父元素的颜色

border-style 属性

border-style 属性是边框的基本属性之一。可以将以下值传递给 border-style：

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • initial
  • inherit

以下是一个使用border-style的示例：

<html>
<head>
<style>
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.dotted {border-style: dotted;}
    p.dashes {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.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
   <h2>border-style Property</h2>
   <p class="none">No border.</p>
   <p class="hidden">Hidden border.</p>
   <p class="dotted">Dotted border.</p>
   <p class="dashes">Dashed border.</p>
   <p class="solid">Solid border.</p>
   <p class="double">Double border.</p>
   <p class="groove">Groove border.</p>
   <p class="ridge">Ridge border.</p>
   <p class="inset">Inset border.</p>
   <p class="outset">Outset border.</p>
   <p class="mixed">A mixed border.</p>
</body>
<html>

单边边框样式

属性 border-style 可以专门为每个单独的边指定。可以将相同的一组值传递给 border-style 的每个单独的边：

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

让我们看一个示例：

<html>
<head>
<style>
    p {
        border-top-style: dotted;
        border-right-style: solid;
        border-bottom-style: dashed;
        border-left-style: double;
        padding: 2em;
    }
</style>
</head>
<body>
   <h2>border-style (single-side)</h2>
   <p>Different border styles on all sides.</p>
</body>
<html>

宽度属性

在设置边框样式之后，border-width属性是接下来要处理的属性。以下值可以传递给border-width：

值描述
thin细边框
medium中等宽度边框
thick粗边框
length指定的任意长度（如0.1em，5px）

在声明border-width之前声明border-style，否则将看不到边框效果。

看下面一个示例（有和没有指定border-style）：

<p style="display: inline-block; border-width: thin;">细边框。</p>
<p style="display: inline-block; border-width: medium;">中等边框。</p>
<p style="display: inline-block; border-width: thick;">粗边框。</p>
<p style="display: inline-block; border-width: 100px;">特定长度边框。</p>
<p style="display: inline-block; border-style: double; border-width: thin;">细宽度。</p>
<p style="display: inline-block; border-style: dashed; border-width: medium;">中等宽度。</p>
<p style="display: inline-block; border-style: solid; border-width: thick;">粗宽度。</p>
<p style="display: inline-block; border-style: dotted; border-width: 10px;">特定长度宽度边框。</p>

单边 - 边框宽度

border-width属性可以专门为每个单独的边指定。可以将相同的一组值传递给每个单独边的border-width：

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

看下面示例：

<p style="display: inline-block; border-style: solid; border-top-width: thin; border-right-width: thick; border-bottom-width: medium; border-left-width: 10px; padding: 2em;">各边不同的边框宽度。</p>

颜色属性

border-color是边框的第三个组成部分。它设置边框的颜色。

  • 边框可以有一个、两个、三个或四个值。
  • 如果未为边框指定颜色，则默认值为currentcolor，即前景色。
  • 可以传递任何类型的颜色值，如RGB、RGBA、十六进制等。

下表列出了border 属性值：

值描述
color边框将是指定的颜色
transparent边框将是透明的
inherit继承父元素的值

在声明border-color之前，请先声明border-style，否则将看不到边框效果。

看下面示例（有和没有指定border-style）：

<p style="display: inline-block; border-color: red;">红色边框。</p>
<p style="display: inline-block; border-color: #00ff00;">十六进制绿色。</p>
<p style="display: inline-block; border-style: dashed; border-color: red;">红色边框。</p>
<p style="display: inline-block; border-style: solid; border-color: #00ff00;">十六进制绿色。</p>

单边 - 边框颜色

border-color属性可以专门为每个单独的边指定。可以将相同的一组值传递给每个单独的边的border-color：

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

让我们看一个示例：

<p style="display: inline-block; border-style: solid; border-top-color: red; border-right-color: #0000ff; border-bottom-color: rgb(100,123,111); border-left-color: rgba(50,123,111,0.4); padding: 0.5in;">各边不同的边框颜色。</p>

单边 - 简写属性

如果只想在元素的一侧应用所有边框属性，例如样式、宽度和颜色，可以使用简写的边框属性。

例如，如果要将边框属性应用于h2元素的顶部，则可以使用以下语法：

   h2 {border-top: thin solid red;}

基于每个元素边的四个简写属性如下：

  • border-top
  • border-right
  • border-bottom
  • border-left

让我们看一个示例：

<html>
   <head>
      <style>
         p {border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 2cm;}
      </style>
   </head>
   <body>
         <h2>Shorthand single-side border properties</h2>
         <p>Check the borders!!! </p>
 </body>
</html>

全局 - 简写属性

在元素的所有边上设置最小可能的简写属性是border。

语法:

h2 {border: thick dotted green;}

上面的代码将在h2元素的所有四个边上添加绿色、虚线和粗边框。

让我们看一个示例：

<html>
<head>
<style>
   p {border: green dashed thick;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

但是，仍然可以选择独立的单个属性覆盖边框简写属性。请参阅以下示例代码以澄清这一点：

h2 {border: thin solid gray;}
h2 {border-bottom-width: 15px;}

上面的代码将在所有边上设置一个具有细、实线和灰色边框，除了底部的宽度为15px。

让我们看一个示例：

<html>
<head>
<style>
   p {border: #0000ff dashed thick;
      border-bottom-width: 15px;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>
avatar
文章
阅读
粉丝