CSS中border的高能效應，教你制作各種簡易圖形

言

在前端開發中經常會用到很多的簡易圖形，例如三角形，箭頭，圓形等。有很多人一開始會想著用小的圖片實現，不過這樣會增加頁面請求次數，延緩頁面加載效果。

在CSS中有個border屬性，它完全可以達到制作各種簡易圖形的效果，今天我們就一起來看看吧。

文章中的代碼都已經放在了github上，感興趣的同學自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border講解

在制作各種簡易圖形之前，我們先來看看border屬性的使用。

border是一個復合屬性。

border-width表示邊框寬度。
border-style表示邊框樣式，設置實線，虛線，點狀等。
border-color表示邊框顏色，還可以設置transparent，表示透明。

border又分為上下左右四個方向，每個方向都占據各自的空間，不會出現重疊的地方，尤其是在四個方向的邊框都設置的情況下，在四個角處也不會出現重疊。

我們來看個最簡單的例子，在四個方向上都設置邊框，賦予不同的顏色。

圖片1

通過上面的圖片1可以看出，四個角處是分離，沒有重合的。

梯形

首先我們來看看梯形的效果圖。

梯形效果圖

我們再來分析下梯形是如何實現的。

因為我們完全是通過border設置，所以這個div的高度應該為0。
梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側的border-style設置為transparent。

因此我們可以得到以下的CSS代碼。

梯形的CSS代碼

修改border-left和border-right的寬度值，可以改變梯形的形狀。

三角形

三角形也分為上下左右四個方向，我們首先來看看總體的形狀。

三角形

然后我們也來分析下如何實現這個效果，以下三角形為例。

因為是呈現三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應該為0。
下三角形是上部有區域，所以要設置border-top。
border-left和border-right兩個方向都要設置寬度，然后設置為透明即可。

因此得到以下的CSS代碼，設置不同方向border的寬度，三角形的形狀也會跟著變。

下三角形CSS代碼

同理，只要掌握了其中一個方向的三角形原理，就會輕松寫出其他方向三角形的CSS代碼。

這里直接給出上三角形的CSS代碼。

上三角形CSS代碼

左三角形的CSS代碼如下所示。

左三角形CSS代碼

右三角形的CSS代碼如下所示。

右三角形CSS代碼

正方形-四種顏色

接下來我們看一種基本的只用border設計的形狀。

圖形

它的實現方式也很簡單，只需要將width和height設置為0，然后將border四個方向的寬度設置成一樣的即可。

得到的代碼如下所示。

CSS代碼

直角三角形

基于上述的實現，我們可以得到左下，左上，右上，右下四種三角形。

首先看看基本形狀。

直角三角形

看到圖形后，我們很容易發現，只要隱藏掉連接的兩個方向的border，顯示出另外兩個方向的border，就可以得到直角三角形。

這里我們只展示出左上三角形的CSS代碼。

左上直角三角形CSS代碼

其他方向的直角三角形代碼可類比得出，大家可以試一下。

六角星

首先我們看看六角星的形狀。

六角星

看到這個圖形，大家應該能想到可以由上下兩個三角形構成，只要將上下兩個三角形位置對應準確。

這里為了節省頁面元素的空間，我們可以采用偽元素去實現。

將頁面顯示元素設置為上三角形。
利用:after偽元素設置下三角形。
設置偽元素的position為absolute，調節right和top值。

通過上述分析，我們得到以下CSS代碼。

六角星CSS代碼

圓形

與border屬性搭配使用的還有一個很常用的屬性，那就是border-radius。

border-radius是專門設置圓角的，可以讓90度角變為圓角。

我們首先看看最基本的圓形的樣子。

圓形

其實我們只需要將border-radius屬性設置為寬或者高的一半以上即可。代碼如下所示。

圓形

同心圓

我們來看看同心圓的樣子。

同心圓

同心圓只需要設置一個border邊框，給border設置一個特殊的背景色，給div設置成白色背景即可。

同心圓CSS代碼

半圓

我們來看看半圓的形狀。

半圓

半圓的效果是如何實現的呢？

首先元素自身高度設置為0，設定寬度值。
設定上部和右部的border。
設定左上角和右上角的border-radius值。

得到的代碼如下所示。

上半圓

同理，下半圓，左半圓和右半圓修改對應的值就可以獲得。

結束語

今天這篇文章主要通過border屬性，畫出了一系列簡易的圖形，這在實際中是很實用的，大家學會了嗎?

lt;div class="sector"></div>

.sector{
      width: 200px;
      height: 200px;
      border-radius: 200px;
      background-color: deepskyblue;
      position: relative;
    }
    .sector::before{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁減半圓，再做旋轉*/
      clip: rect(0px,100px,200px,0);
      transform: rotate(-60deg);
    }
    .sector::after{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁減半圓，再做旋轉*/
      clip: rect(0px,200px,200px,100px);
      transform: rotate(60deg);
    }

方式二

<>
  <style>
    #demo {
      position: relative;
      width: 50px;
      height: 50px;
      overflow: hidden;
    }
    #circle {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: black;
      border-radius: 50%;
    }
  </style>
  <body>
    <div id="demo">
      <div id="circle"></div>
    </div>
  </body>
</>

方式三

有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

1.1 盒子模型

在學習盒子模型之前，先來看一個生活中的例子。假如墻上排列著幾幅畫。對于每幅畫來說，都有一個邊框，在英文中稱為border；每個畫框中，畫和邊框通常都會有一定的距離，這個距離稱為內邊距，在英文中稱為padding；每一幅畫間也不是緊挨著的，也存在一些距離稱為外邊距，在英文中稱為margin。

在CSS中，一個獨立的盒子模型由content（頁面內容）、border（邊框）、padding（內邊距）、margin（外邊距）四部分組成

1.content：位于最中間，頁面的主要顯示內容，也就是這幅畫的本身2.border：位于內邊距外面，如果沒有內邊距就是包著內容的外框。它一般具有一定的厚度，也就是這幅畫的畫框3.padding：位于邊框內部的空隙，是內容與邊框的距離，也就是畫框和圖之畫之間的空隙4.margin：位于邊框內部空隙，邊框外面周圍的距離，也就是每幅畫之間的空隙

1.1.1 邊框

邊框（border）有三個屬性，分別是color（顏色）、width（粗細）和style（樣式）。在網頁中設置邊框樣式時，嘗嘗需要將這三個屬性很好地配合起來，才能達到良好的頁面效果。在使用CSS設置邊框時，分別使用border-color、border-width和border-style設置邊框的顏色、粗細和樣式

border-color

border-color的設置方法與文本的color屬性或背景顏色bancground-color屬性的設置方法完全一樣，也是使用十六進制設置邊框的顏色，如紅色為#FF0000，也可以使用RGBA的顏色表示方法。

由于盒子模型分為上、下、左、右四個邊框，因此在設置邊框顏色時，可以按上、右、下、左的順序來設置四個邊框顏色，也可以同時設置四個邊框的顏色。border-color屬性設置方法如下：

屬性說明舉例border-top-color設置上邊框顏色border-top-color:#369border-right-color設置右邊框顏色border-right-color:#369border-bottom-color設置下邊框顏色border-bottom-color:#FAE45Bborder-left-color設置左邊框顏色border-left-color:#EEFF34border-color設置四個邊框顏色為同一個顏色border-color:#EEFF34

當使用border-color屬性同時設置四條邊框顏色時，設置順序按順時針方向上、右、下、左設置邊框顏色，屬性值之間以空格隔開。沒有設置屬性值的找對邊

例如：border-color:#369 #000 #F00 #00F;四個屬性按上、右、下、左依次對號入座。

例如：border-color:#369 #000 #F00;三個屬性值按上、右、下、左依次對號入座。#369對應上邊框，#000對應右邊框，#F00對應下邊框，發現到“左”的時候沒有屬性值了，這時候找它的對邊。因為“左”的對邊是“右”所以#000對應左邊框

以后無論給出幾個屬性值都按照“上、右、下、左”“沒有找對邊”的方式來對應

border-width

border-width用來指定border的粗細程度，它的值有thin、medium、thick和像素值

thin ：設置細的邊框

medium：默認值，設置中等的邊框一般的瀏覽器都將其解析為2px

thick：設置粗的邊框

像素值：表示具體的數值，自定義設置邊框的寬度，如1px、5px等

border-style

border-style用來指定border的樣式，它的值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset，其中none、dotted、dashed、solid在實際網頁制作中是經常用到的值。none表示無邊框，dotted表示點線邊框，dashed表示虛線邊框，solid表示實現邊框。由于dotted和dashed在大多數瀏覽器顯示為實線，因此在實際網頁中，為了瀏覽器兼容性，常用none和solid。

值含義none默認無邊框dotted定義一個點線邊框dashed定義一個虛線邊框solid定義實線邊框double定義兩個邊框。兩個邊框的寬度和 border-width 的值相同groove定義3D溝槽邊框。效果取決于邊框的顏色值ridge定義3D脊邊框。效果取決于邊框的顏色值inset定義一個3D的嵌入邊框。效果取決于邊框的顏色值outset定義一個3D突出邊框。效果取決于邊框的顏色值

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*設置div邊框，1px黑色的實線邊框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*設置第一個p標簽邊框為1px的點狀虛線*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*設置第二個p標簽邊框為1px的虛線邊框*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*設置第三個p標簽邊框為4px的雙線邊框*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.2 外邊距

外邊距（margin）位于盒子邊框外，指與其他盒子之間的距離，也就是指網頁中元素與元素之間的距離，例如示例1效果圖中標題與div上邊框之間的距離，以及標題與下方表單之間的距離都是由h2外邊距產生的。從圖中也可以看到頁面內容并沒有緊貼瀏覽器，而是與瀏覽器有一定的距離，這就是因為body本身也是一個盒子，也有一個外邊距，這也是由body的外邊距產生的。

外邊距與邊框一樣，也分為上外邊距、右外邊距、下外邊距、左外邊距，使用方法和border-color方法一樣。

1.1.3 內邊距

內邊距（padding）用于控制內容與邊框之間的距離，以便精確控制內容在盒子中的位置。內邊距與外邊距一樣，也分為上內邊距、右內邊距、下內邊距、左內邊距，設置方式和設置順序也都一樣，請參照border-color設置方法。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*設置div邊框，1px黑色的實線邊框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*設置第一個p標簽邊框為1px的點狀虛線*/margin-top: 30px; /*距離頂部的距離30px*/padding: 40px;   /*所有填充都是40px*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*設置第二個p標簽邊框為1px的虛線邊框*/margin-left: 20px;  /*距離左側的距離20px*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*設置第三個p標簽邊框為1px的雙線邊框*/margin: 50px;  /*4個邊距50px*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.4 盒子模型的尺寸

在CSS中，width和height指的是內容區域的寬度和高度。增加了邊框、內邊距和外邊距后不會影響內容區域的尺寸，但是會增加盒子模型的總尺寸。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width:100px;/*div寬度100px*/height:100px;/*div高度100px*/padding:5px;/*div上右下左外邊距5px*/margin:10px;/*div上右下左內邊距10px*/border:1px solid #000;/*div上右下左邊框為1px*/    }</style></head><body><div></div></body></html>

運行之后會發現div的實際總寬度為112px而不是100px這說明把寬度width設置為100px是不能達到最終要求的盒子總寬度為100px的。

修改上面代碼如下：

div{        width:88px;/*div寬度100px*/height:88px;/*div高度100px*/padding:5px;/*div上右下左外邊距5px*/margin:10px;/*div上右下左內邊距10px*/border:1px solid #000;/*div上右下左邊框為1px*/    }

盒子模型的計算方法：

盒子模型內盒總尺寸=border（上下/左右）+padding（上下/左右）+內容寬度

1.1.5 box-sizing拯救布局

為了解決上述問題CSS3添加了一個盒子模型屬性box-sizing，能夠事先定義盒子模型的尺寸解析方式

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

box-sizing: content-box|border-box|inherit:

值說明content-box這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外border-box指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。inherit指定 box-sizing 屬性的值，應該從父元素繼承

示例

div {        width:100px;        height:100px;        padding:5px;        margin:10px;        border:1px solid #000;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;    }

2.1 圓角邊框

在 CSS2 中添加圓角矩形需要技巧。我們必須為每個圓角使用不同的圖片。

在 CSS3 中，創建圓角是非常容易的。

在 CSS3 中，border-radius 屬性用于創建圓角：

2.1.1 圓角邊框語法

border-radius:length{1,4}

注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1.border-radius:length{1}設置一個屬性值表示top-left,top-right,bottom-right和bottom-left四個值是一樣的，也就是元素四個圓角效果一樣

2.border-radius:length{2}設置兩個屬性值表示top-left等于bottom-right，并且取第一個值，top-right等于bottom-left，并且取第二個值，也就是左上角和右下角取第一個值，右上角和左下角取第二個值

3.border-radius:length{3}設置三個屬性值，第一個值是top-left,第二個值是top-right和bottom-left，第三個只是bottom-right

4.border-radius:length{4}設置四個屬性值，第一個值是top-left，第二個值是top-right第三個值bottom-right第四個值bottom-left

示例

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:10px solid red;       -webkit-border-radius:20px;       -moz-border-radius:20px;       border-radius:20px;/*div四個角都是圓角，值為20px*/   }</style></head><body><div></div></body></html>

2.1.2 使用border-radius制作特殊圖形

制作圓形

利用border-radius屬性制作圓角時有兩個要點

1.元素的寬度和高度必須相同 2.圓角的半徑為元素寬度的一般，或者直接設置圓角半徑值為50%

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:4px solid red;       -webkit-border-radius:50%;       -moz-border-radius:50%;       border-radius:50%;/*div四個角都是圓角，值為20px*/   }</style></head><body><div></div></body></html>

制作半圓

利用border-radius屬性制作半圓的方法和制作圓形的方法一樣，只是元素的寬度與圓角的方為要配合一直，不同的寬度和高度比例，以及圓角的方位，可以制作上半圓、下半圓、左半圓、右半圓

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:100px;        height:50px;        -webkit-border-radius:50px50px00;        -moz-border-radius:50px50px00;        border-radius:50px50px00;    }   div:nth-of-type(2){        width:100px;        height:50px;        -webkit-border-radius: 0050px50px;        -moz-border-radius: 0050px50px;        border-radius: 0050px50px;    }   div:nth-of-type(3){        width:50px;        height:100px;        -webkit-border-radius:050px50px0;        -moz-border-radius:050px50px0;        border-radius:050px50px0;    }   div:nth-of-type(4){        width:50px;        height:100px;        -webkit-border-radius:50px0050px;        -moz-border-radius:50px0050px;        border-radius:50px0050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

制作半圓形的要點：

1.當制作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角半徑為元素的高度值2.當制作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角半徑為元素的寬度值

制作扇形

遵循“三通，一不同”原則，“三同”是元素寬度、高度、圓角半徑相同，“一不同”是圓角取值位置不同

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:50px;        height:50px;        -webkit-border-radius:50px000;        -moz-border-radius:50px000;        border-radius:50px000;    }   div:nth-of-type(2){        width:50px;        height:50px;        -webkit-border-radius: 050px00;        -moz-border-radius: 050px00;        border-radius: 050px00;    }   div:nth-of-type(3){        width:50px;        height:50px;        -webkit-border-radius:0050px0;        -moz-border-radius:0050px0;        border-radius:0050px0;    }   div:nth-of-type(4){        width:50px;        height:50px;        -webkit-border-radius: 00050px;        -moz-border-radius: 00050px;        border-radius: 00050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

3.1 盒子陰影

box-shadow:inset x-offset y-offset blur-radius color;

1.inset：陰影類型，可選值，如果不設置，默認的投影方式是外陰影；如果設置了inset表示內陰影

2.x-offset：X軸位移，用來指定陰影水平位移量，其值可以是正值，也可以是負值，如果問正值，陰影在對象的右邊；反之，陰影在對象的左邊

3.y-offset：Y軸位移，用來指定因應垂直位移量，其值可以是正值，也可以是負值，如果為正值，陰影在對象的底部；反之，陰影在對象的右邊

4.blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊范圍，值越大陰影向外模糊的范圍就越大，陰影的邊緣就越模糊。這個值只能是正值，如果為0，則表示不具有模糊效果，是可選值

5.color：陰影顏色，定義繪制陰影時所使用的顏色。陰影顏色可以是十六進制顏色，RGB、RGBA透明色等，不寫這個值會用瀏覽器的默認色代替，由于瀏覽器默認色不一樣，因此建議不要省略這個值

與用圖片來制作盒子陰影相比，利用box-shadow屬性修改陰影效果要方便的多，并且從box-shadow的語法上可以看出它的每個屬性值都是可以自由設置的，這就意味著我們可以隨意設置出不同的陰影效果

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{        width:100px;        height: 100px;        border:1px solid red;        -webkit-border-radius:8px;        -moz-border-radius:8px;        border-radius:8px;        margin:20px;        -webkit-box-shadow:  20px10px#06C;        -moz-box-shadow:  20px10px#06C ;        box-shadow:  20px10px#06C ;    }</style></head><body><div></div></body></html>

4.1 總結

1.盒子模型的概念、盒子模型的邊框、外邊距和內邊距在網頁中的使用方法2.使用border、padding、margin美化圖片、div、列表、表單元素等網頁元素3.精確計算盒子模型的尺寸，并且可以通過box-sizing選擇盒子模型的解析方式4.使用border-radius給元素添加圓角效果，以及制作特殊的圖形5.使用box-shadow給元素添加內、外陰影效果

免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/

在線咨詢

上一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作
下一篇：WEB編程里面的HTML英文文檔，你能夠正確翻譯嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS中border的高能效應，教你制作各種簡易圖形

言

border講解

梯形

三角形

正方形-四種顏色

直角三角形

六角星

圓形

同心圓

半圓

結束語

1.1 盒子模型

1.1.1 邊框

border-color

border-width

border-style

1.1.2 外邊距

1.1.3 內邊距

1.1.4 盒子模型的尺寸

1.1.5 box-sizing拯救布局

2.1 圓角邊框

2.1.1 圓角邊框語法

2.1.2 使用border-radius制作特殊圖形

3.1 盒子陰影

4.1 總結

您的項目需求