在學習之前，我們先來認識一下css這位人物的作用
css 相當于美化工具，就是在事物原有的基礎上對外表進行修飾和包裝，跟ps、美圖秀秀等類似，隻不過，css 是美化的對象是html 文本，是一個超文本标記語言。
我們現在已經簡單了解了css 的作用，但了解隻是開始，并不能滿足于我，是以我想親手去實踐，我相信在看的你，也非常急切的想動手試試看。
今天我們就隻學習border 這個屬性。
因為css是作用在html檔案上的，是以我們先建一個html 檔案，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="-utf-8">
<title>border學習</title>
</head>
<body>
<div>
</div>
</body>
</html> 複制
在body 中，我建立了一個空的div 标簽，但是沒有内容，是以你是看不到的，現在我給它一個css 中的border 屬性，給它設定寬
width:100px
、高
height:100px
和邊框寬度
border-width:1px;
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="-utf-8">
<title>border學習</title>
<style>
div{
width:100px;
height:100px;
border-width:1px;
border-style:solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 複制
你寫好了嗎？寫好了我們就打開浏覽器看看效果吧~
我們先看下代碼，添加樣式的其中一種方法就是在head 的标簽中添加style 标簽，并在該标簽下為body 下的div 标簽添加css樣式，這種方法我們稱它為内聯樣式。
因為這裡隻有一個div 标簽，是以我直接采用标簽名指定目标，屬性需要添加在大括号{}内哦~
屬性就是冒号：左邊的内容，那麼右邊對應的就是屬性值，你可以把冒号想象成等于号=，這樣會更容易了解和記憶。
圖中用矩形标注的内容對應的就是title 标簽中的内容，箭頭指的正方形，就是我們剛才添加css 後的效果 。我們隻是設定了邊框的寬度，用的是
border-width:1px;
,但我們并沒有是設定顔色，是以我們可以得知，邊框的顔色預設是黑色的~
現在我想要把邊框顔色變成紅色，那麼我會這麼做
<style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-style:solid;
border-color:red;
}
</style> 複制
我添加了
border-color:purple;
，我們來看看效果
我們可以看到，邊框顔色确實變成了紅色，當然你也可以改成其他顔色。這裡要說下，顔色的表示方法有三種，分别是rgb(255，0，0)、#ff0000、red ,這三種都可以表示紅色。
有時候你可能會看到有些邊框是虛線的，沒事，我們也可以，隻要這麼做
<style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-style: dashed;
border-color:red;
}
</style> 複制
通過設定
border-style:dashed;
來改變邊框的樣式，來看看效果
呃。。有點不好看，是以我們一般不怎麼用，一般都是用前面寫到的solid 這個屬性值，當然，屬性值不隻這兩個，但是其他的不常用，是以這裡就不說了，感興趣的話可以自行查找
目前我們已經寫了5行樣式了，會不會覺得有點長，有點占空間是不是？好，接下來，我把它縮寫一下，看代碼
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
}
</style> 複制
縮寫完後隻剩下3行了，減少了2行的空間。需要注意的是屬性值的順序：寬度->樣式->顔色，然後中間是用空格隔開而不是用逗号哈~這種方式叫做複合寫法。
當然，我們也可以針對邊框的任意一邊設定樣式，四個方向分别是上top、左left 、下bottom、右right
我隻要在上邊添加邊框就可以這麼寫
border-top:1px solid red;
來看下效果
說明這樣寫時沒問題的 ，剩下的三個邊你來嘗試一下哦~
em~有時候做事需要圓滑一點，是以我也想讓矩形變成圓圓的，那就添加一個樣式叫做
border-radius:50%;
代碼如下：
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
border-radius:50%;
}
</style> 複制
一起來看下效果
嗯，一個圓就這樣出來了~其中50% 是指将矩形的長寬的一半作為半徑，原點就在兩條對角線的交點上，然後對裁剪掉圓外的部分，這樣就變成一個圓啦~當然，有個前提條件就是這個矩形必須是正方形，不然得到的就是橢圓了，不信你試試
可我不想把矩形的四個角都變成曲線，而是隻改變一個角，這樣能不能做到？
答案肯定是可以的，現在跟你說道說道
我不設定50% 而是用像素機關px 來做這個圓，來看看它是怎麼形成的
首先 我先設定一個屬性值
border-radius:50px
，來看看圖形有什麼變化
好，我們會發現沒什麼變化，那設定兩個參數
border-radius:50px 0px;
來看下效果
顯示的不是一個圓，我用黑色圓圈标注的兩處是直角，對應的參數是0px，用紫色圓圈标注的是曲線，對應的參數是50px。是以結合上面設定的參數，可以得出這麼一個結論：當有兩個參數時，第一個參數對應了左上和右下 ，第二個參數代表了左下 和右上
我們繼續，将參數設定為三個
border-radius:50px 0px 0px;
，來看下效果
原本右下角是曲線，現在變成了直角，這也就說明了當有三個 參數時，第一個參數對應着左上，第二個參數對應着左下和右上，第三個參數對應着右下
那我問個問題，你們來思考：如果我設定了4個參數，那麼圖形将會變成什麼樣？這4個參數又分别代表那幾個角？
最後咱們總結一下本文的内容：
- border-width:邊框的寬度
- border-color:邊框的顔色
- border-style:邊框的樣式
- border中寬度、樣式、顔色的複合寫法
- border-radius:邊框的圓角