作者 | 開課吧無憂
編輯 | 開三金
來源 | 開課吧前端團隊（ID:KKBWeb）
三金有話說：
為了滿足前端萌新粉絲的需求，這篇文章還是非常非常的接地氣，很适合新手前端閱讀~前端基礎較為紮實的“老前端”玩家不要心灰意冷，三金會繼續為大家帶來實用有效的深層前端幹貨！
感謝各位小夥伴的關注，給大家打call~
前兩篇傳送門：
這是真正屬于的0基礎小白的前端幹貨（一）
這是真正屬于的0基礎小白的前端幹貨（二）
1上一節我們已經學習了如何在頁面中使用css了，以及知道了一些簡單的css樣式。
接下來我們還會更深入的學習一些别的css樣式，用來豐富我們的頁面。
現在就趕緊開始吧~
今天的這個樣式叫做border，中文邊框的意思在我們的生活中，邊框随處可見；
比如窗戶，門框等等，甚至我們現在看到的電腦屏幕四周的邊也可以稱之為邊框
要在我們的網頁當中應用邊框非常的簡單，就和之前我們用到的背景一樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height:100px;
border:1px solid #f00283;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
這樣我就在頁面當中放入了一個div标簽，并且給它設置了一些css樣式：
寬度100像素，高度100像素，邊框是1像素的實線，邊框顔色是粉紅色。
效果圖如下：
在些樣式裡，寬度和高度之前我們已經介紹過了，直接來看看border。
它一共有三個值，分别是：
1px
solid
#f00283
這三個值分别代表：
1px 邊框的寬度
solid 邊框的樣式
#f00283 邊框的顔色
如果把其中的1px改成10px，那麼我們将得到下圖：
和上圖對比，這個效果裡面的邊框明顯變粗了，也就是代碼裡面所說的，邊框的寬度變大了。
下圖分别是邊框為 1px,10px,20px
和上圖對比，這個效果裡面的邊框明顯變粗了，也就是代碼裡面所說的，邊框的寬度變大了。
下圖分别是邊框為 1px,10px,20px
不過虛線和點線這兩個樣式在不同的浏覽器裡面表現的形式可能不太一樣，所以一般不用虛線和點線
最後一個值是一個顔色，關于顔色的表示方法我們在上一節已經說過了，這裡不再贅述
看到這裡,大家可能覺得邊框已經介紹完了，但是滾動條決定了這注定不是結局
來，我們繼續探索。
2邊框不僅僅隻有這一個樣式，因為我們css實在太強大了，強大到可以随意控制任意一個方向的邊框并且改變其粗細，樣式甚至顔色
從上面的圖中就能看到邊框一共有四條邊，那麼我們就可以改變其中的某一條邊
比如說我需要一個上邊框為藍色，且粗細為10像素，而其他方向的邊框粗細為2像素，顔色為紅色。
考慮以下樣式：
div{
display: inline-block;
width:100px;
height:100px;
border:2px solid red;
border-top:10px solid blue;
}
可以看到在這裡border:2px solid red;
首先給div指定四個方向的邊框的粗細為2像素，樣式為實線，顔色為紅色
在下面緊接着又指定了一條樣式：border-top,這條樣式指定了上方向的邊框會怎樣顯示。
首先粗細變成了10像素，邊框的樣式還是實線，然後顔色變成了藍色。
那麼我們将會得到下圖所示的效果：
那麼一次類推，border這一條樣式就可以拆分成四個不同的樣式，分别是：
· border-top
· border-right
· border-bottom
· border-left
至于這個順序為什麼是上右下左而不是我們平常生活中的上下左右，我們以後會慢慢見識到這個順序的重要性，這裡先不多說。
3其實按照拆分原理，我們這樣拆分出來四條樣式其實還不夠細；
假如我現在有這麼一條需求，四條邊都是一樣的粗細，樣式；
隻是上邊框的顔色不一樣，那麼按照上面的樣式，我們就得這樣來寫
· border:2px solid red
· border-top:2px solid blue
首先把四條邊的樣式都統一寫出來，然後再修改其中一條邊的樣式；
但是這一條邊其實我們隻修改了其中的一個值，那就是顔色，其他的兩個值都是重複的；
所以在這裡應該有更加細緻的樣式。
這也就是我們進一步要拆分的樣式，比如：
· border-top-color
沒錯，一開始我們就說了邊框這條樣式的三個值分别代表的是粗細；
在css裡面的描述也就是width，第二個值代表邊框的樣式，在css裡面的描述也就是style，最後一個值是顔色，那麼也就是color
所以說起來border還可以這樣來拆分：
· border-width
· border-style
· border-color
再加上四個方向，那麼我們就可以得到一堆的樣式：
· border-width
· border-top-width
· border-right-width
· border-bottom-width
· border-left-width
· border-style
· border-top-style
· border-right-style
· border-bottom-style
· border-left-style
· border-color
· border-top-color
· border-right-color
· border-bottom-color
· border-left-color
有了這麼一堆樣式之後我們就能夠随心所欲的控制我們的邊框啦！
不過這裡面，這幾個樣式是比較特殊的：
· border-width
· border-style
· border-color
這幾個樣式能接收多個值，以達到随意控制四條邊框效果，比如border-width
當我們隻給它一個值的時候，那麼四條邊的寬度都是一樣的，但是當我們給它兩個值的時候，邊框的寬度就變得不一樣了：
.div4{
width:100px;
height:100px;
border-width:10px 30px;
border-style:solid;
border-color:#333;
}
這裡，border-width裡面有兩個值，得到的效果圖如下：
從圖裡面就能看到，很明顯上下兩條邊的寬度要小于左右兩條邊框。
這也就代表了在border-width:10px 30px;
這條樣式裡，第一個寬度值應用到了上下兩條邊框身上，而第二個寬度值應用到了左右兩條邊框身上。
再來看三個值：
.div4{
width:100px;
height:100px;
border-width:10px 30px 50px;
border-style:solid;
border-color:#333;
}
不太意外，不過這裡發生了一點點變動；
第一個值不再是應用到上下兩條邊框身上了，而隻應用到了上面這一條邊框身上
第二個值還是應用到左右兩條邊框身上了
而第三個值應用到了下面這條邊框身上
再看四個值：
.div4{
width:100px;
height:100px;
border-width:10px 30px 50px 5px;
border-style:solid;
border-color:#333;
}
那麼從這裡也就能看到：
第一個值應用到了上面，第二個值在右邊，第三個值在下面，第四個值在左邊。
正好遵循了文章開頭的時候提到過的：上右下左這個順序
以此類推，border-style和border-color同樣能接收四個值
當隻有一個值的時候，這一個值同時應用到四條邊框身上；
當有兩個值的時候，第一個值應用在上下，第二個值左右；
當有兩三個值的時候，第一個值應用在上邊，第二個值左右，第三個值應用在下邊；
當有兩四個值的時候，分别代表了上，右，下，左。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
