整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
order 盒子邊框
復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色
語法：border: border-width | border-style | border-color ;
邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。
邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可為盒子邊框設置樣式，以下示例為實線
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代碼
如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓
使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代碼
如果需要設置不同方向的邊框粗細，可以寫在一句 CSS 代碼里。
比如說下面這段代碼，上下2px，右2px，左5px。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接輸入
顏色的英文名稱
rgb值
十六進制
使用 border-color 可為盒子邊框設置顏色，以下示例邊框顏色為紅色。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代碼
上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。
如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。
例如：
/* CSS代碼 */
div{
border-top: 5px solid red;
}這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色
border-top 包含了：
其他同理
先來看一個示例
/* CSS代碼 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
細心的你，一定發現了 border 的邊框四條邊交接處是斜角。
此刻我們把盒子的寬高設置為 0
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四個三角形一樣。
我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。
為 border-color 指定 transparent 值，使盒子邊框顏色變透明
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三條邊透明之后，就只剩一個三角形了。
完
部分資料引用自：
網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模型都具備這些屬性。這些屬性我們可以用日常生活中的常見事物盒子作一個比喻來理解，所以叫它盒子模型。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
語法：
border : border-width border-style border-color<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 5px solid red; width: 80px; }</style></head><body> <div>碼海無際</div></body></html>邊框屬性—設置邊框樣式（border-style），邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
CSS 邊框屬性：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { border-width: 5px; border-style: solid; border-color: red; width: 80px; } .d2 { border-bottom: 5px solid blue; width: 80px; }</style></head><body> <div>碼海無際</div> <br> <div class="d2">碼海無際</div></body></html>padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
注意： 后面跟幾個數值表示的意思是不一樣的：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { border: 1px solid red; width: 80px; padding: 15px 30px; }
.dv2 { border: 1px solid red; width: 80px; padding-top: 15px; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; }</style></head><body> <div class="dv1">碼海無際</div> <br> <div class="dv2">碼海無際</div></body></html>margin屬性用于設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
取值順序跟內邊距相同。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1{ width: 80px; border: 1px solid red; margin: 15px; } .dv2{ width: 80px; border: 1px solid red; }</style></head><body> <div class="dv1">碼海無際</div> <div class="dv2">碼海無際</div></body></html>可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 120px; border: 1px solid red; margin: 50px auto; /*只是讓盒子居中，盒子里面的內容不會居中*/ text-align: center; }</style></head><body> <div class="dv1">碼海無際</div></body></html>為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; /* 清除內邊距 */ margin: 0; /* 清除外邊距 */ } .dv1 { width: 120px; border: 1px solid red; }</style></head><body> <div class="dv1">碼海無際</div></body></html>當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 80px; height: 50px; background-color: red; margin-bottom: 20px; } .dv2 { margin-top: 30px; width: 80px; height: 50px; background-color: blue; }</style></head><body> <div class="dv1">碼海無際</div> <div class="dv2">碼海無際</div></body></html>對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
解決方案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 100px; height: 100px; background-color: red; /*border-top: 1px solid darkmagenta;*/ /*padding-top: 1px;*/ overflow: hidden; } .dv2 { width: 80px; height: 50px; background-color: blue; margin-top: 20px; }</style></head><body> <div class="dv1"> <div class="dv2"></div> </div></body></html>實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網頁布局的本質
網頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
其實，行內元素比如 文字 類似牛奶，也需要一個盒子把他們裝起來，雙標簽都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。
看透網頁布局的本質： 把網頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網頁布局。
盒子模型（Box Model）
首先，我們來看一張圖，來體會下什么是盒子模型。
所有的文檔元素（標簽）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文檔元素再網頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。
盒子邊框（border）
邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。
語法：
border : border-width || border-style || border-color
邊框屬性—設置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認值） solid：邊框為單實線(最為常用的) dashed：邊框為虛線 dotted：邊框為點線 double：邊框為雙實線
盒子邊框寫法總結表
表格的細線邊框
以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示邊框合并在一起。
圓角邊框(CSS3)
從此以后，我們的世界不只有矩形。radius 半徑（距離）
語法格式：
border-radius: 左上角 右上角 右下角 左下角;
內邊距（padding）
padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
注意： 后面跟幾個數值表示的意思是不一樣的。
外邊距（margin）
margin屬性用于設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。
外邊距實現盒子居中
可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區別
text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的默認內外邊距
為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內元素是只有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。
我們盡量不要給行內元素指定上下的內外邊距就好了。
外邊距合并
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
解決方案：
content寬度和高度
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是像素值。
大多數瀏覽器，如Firefox、IE6及以上版本都采用了W3C規范，符合CSS規范的盒子模型的總寬度和總高度的計算原則是：
/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內盒尺寸計算（元素實際大小）*/ Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border （Width為內容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內元素無效（ img 標簽和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。
盒子模型布局穩定性
開始學習盒子模型，同學們最大的困惑就是， 分不清內外邊距的使用，什么情況下使用內邊距，什么情況下使用外邊距？
答案是： 其實他們大部分情況下是可以混用的。 就是說，你用內邊距也可以，用外邊距也可以。 你覺得哪個方便，就用哪個。
但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：
按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
width > padding > margin
原因：
盒子陰影
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/外陰影；
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
