css中border的一些知識
阿新 • • 發佈：2019-02-03
red 劃分 itl query title nbsp 部分 火狐瀏覽器 head
在編寫頁面代碼時，經常會用到元素的邊框
括弧：border
給某個元素增加一個1px的實線黑色邊框:
html代碼部分1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap/3.3.6/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.css"> <link rel="stylesheet" href="css/text.css"> </head> <body> <p>使用border給元素增加一個像素的黑色實線邊框</p> <div class="css_2019_2_3_1 css_2019_2_3_2">元素2019_2_3_1</div>
css代碼部分1
.css_2019_2_3_1{
border:1px solid #000;
}
.css_2019_2_3_2{
height: 200px;
width: 300px;
margin: 20px;
}
效果圖1：
但是如果四個方向的邊框線顏色不同時是什麽效果呢？
html代碼部分2
<p>使用border給元素增加一個像素的 括弧：上紅，右綠，下藍，左黃的實線邊框</p> <div class="css_2019_2_3_3 css_2019_2_3_2">元素2019_2_3_2</div>
css代碼部分2
.css_2019_2_3_3{
border-top: 1px solid red;
border-right: 1px solid green;
border-bottom: 1px solid blue;
border-left: 1px solid yellow;
}
效果圖2:
看起來只是改變了各邊的顏色而已，但是我們想知道在邊框線的寬度特別大時，相鄰的邊框線是如何顯示在屏幕上的呢?
html代碼部分3
<p>使用border給元素增加50px的 括弧：上紅，右綠，下藍，左黃的實線邊框</p> <div class="css_2019_2_3_2 css_2019_2_3_4">元素2019_2_3_2</div>
css代碼部分3
.css_2019_2_3_4{
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
}
效果圖3
可以看到相鄰的邊框各寬為水平邊框，高為垂直邊框的長方形根據對角線分成兩個直角三角形的其中一個
那麽我們看看如果邊框的大小和元素的長寬相同時，會怎樣
html代碼部分4
<p>使用border給元素增加一個200px的紅色實線邊框和一個300px的綠色右邊框</p> <div class="css_2019_2_3_5 css_2019_2_3_6">元素2019_2_3_4</div>
css代碼部分4
.css_2019_2_3_5{
border-top: 200px solid red;
border-right: 300px solid green;
}
.css_2019_2_3_6{
height: 200px;
width: 300px;
margin: 100px;
}
效果圖4：
由於元素在頁面顯示的計算規則可以看到元素內容被擠到下面，而元素的寬為300px,高為一個200px故形成一個300px*200px的矩形
兩個邊框各占矩形的非主對角線劃分成的直角三角形的一半。
在來看個更特殊的情況 括弧:
使用border給元素增加一個100px的紅色實線邊框，一個200px的綠色右邊框，一個300px的藍色邊框和一個400px的黃色邊框
html代碼部分5
<p>使用border給元素增加一個100px的紅色實線邊框，一個200px的綠色右邊框，一個300px的藍色邊框和一個400px的黃色邊框</p> <div class="css_2019_2_3_7 css_2019_2_3_8">元素2019_2_3_5</div>
css代碼部分5
.css_2019_2_3_7{
border-top: 100px solid red;
border-right: 200px solid green;
border-bottom: 300px solid blue;
border-left: 400px solid yellow;
}
.css_2019_2_3_8{
height: 400px;
width: 600px;
margin: 100px;
}
效果圖5_1：
再來看看再火狐瀏覽器上控制對一些樣式的顯隱後的情況
最終發現某個方向的邊框的形狀受到其他相鄰方向的邊框的影響
總結：可以根據元素的邊框間的相互作用實現css對一些圖形的繪制,典型的就是booStrap中的caret樣式,用作上下拉的菜單的按鈕符號。
css中border的一些知識