整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
設置底部邊框顏色：
p{border-style:solid; border-bottom-color:#ff0000;}
標簽定義及使用說明
border-bottom-color屬性設置元素的底部邊框顏色。
注意 使用border-bottom顏色屬性前，必須先聲明border樣式屬性。元素必須有邊框，你才可以改變顏色。
| 默認值: | not specified |
|---|---|
| 繼承: | no |
| 版本: | CSS1 |
| JavaScript 語法: | objectobject.style.borderBottomColor="blue" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-bottom-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property Values
| 值 | 描述 | 測試 |
|---|---|---|
| color | 指定背景顏色。在CSS 顏色值 查找顏色值的完整列表。 | |
| transparent | 指定邊框的顏色應該是透明的。這是默認 | |
| inherit | 指定邊框的顏色，應該從父元素繼承 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
建企業網站的時候，會用到一些邊框，無論是表格或是div，布局的時候邊框可以做為一個分界線，讓內容對比或襯托更加明顯。邊框的使用其實也很簡單，一個是邊框的粗細，另一個是邊框的顏色。可以對局部整體設置，也可以單獨設置上下左右四個方向的邊框。在CSS中有一個關于顏色的屬性：border-color，它一次可以接受最多4個顏色值。
border-color值：[<color>|transparent]{1,4} | inherit 初始值：對簡寫屬性未定義計算值：單個屬性（border-top-color，頂部邊框顏色）
如果網頁設計的邊框值小于4個，值復制就會起作用。如果設計人員希望h1元素有細的黑色上下邊框，而且有粗的灰色左右邊框，在CSS樣式中應該這樣寫:
h1{border-style:solid;border-width:thin thick;border-color:black gray;}當然一個顏色值會應用到所有4個邊，如果應用了4個顏色值，那么每邊都會有不同的顏色。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和RGB值：
p{
border-style:solid;border-width:thick;
border-color:black rgb(25%,25%,25%)#808080 silver;}也可以使用簡寫的方式一次性定義多個邊框，比如對某一個段落P進行設置：
P{
border:#cecece 1px solid; //四個邊框均為灰色1px
}還有一些單邊border-color屬性。其原理與單邊樣式和寬度屬性相同。網站建設人員要為標題指定一個實線黑色邊框，而且右邊框為實線灰色，可以如下指定：
P{border-style:solid;border-color:black;border-right-color:gray;}
邊框四個方向對應的屬性名稱：
頂部border-top-color、右側border-right-color、底部border-bottom-color、 左側border-left-color
透明邊框的使用：
在有些情況下網頁制作人員可能想創建一個不可見的邊框。這就引人了邊框顏色值transparent（在CSS2中引入）。這個值用于創建有寬度的不可見邊框。假設你希望包含3個鏈接的一組鏈接有邊框，默認地這些邊框不可見，不過，鼠標停留在鏈接上時邊框要凸起。為此可以讓邊框在鏈接處于非懸停狀態下透明：
a:link, a:visited {
border-style: solid; border-width: 5px; border-color: transparent;}
a:hover {border-color: gray;}利用transparent，使用邊框就像是額外的內邊距一樣，此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當于內邊距，因為元素的背景會延伸到邊框區（假設有可見的背景）。
警告：在IE7之前，IE/Win沒有提供對transparent的支持。在以前的版本中，IE會根據元素的color值來設置邊框顏色。
SS3 的邊框屬性可以給創建圓角的盒子，也可以給盒子設置陰影，用圖片美化盒子。
border-radius可以給元素設置圓角。
如下，一個div元素：
<div class="box">border-radius可以給元素設置圓角。</div>
我們給它加一點樣式，并設置它的border-radius為15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
瀏覽器中查看效果：
border-radius也可以給它四個角分別設置角度，四個值依次代表左上，右上，右下，左下：
border-radius: 15px 15px 0px 0px;
box-shadow可以為元素設置邊框陰影。box-shadow設置的屬性如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平陰影的位置，可以是負值。
v-shadow 垂直陰影的位置，可以是負值。
blur 模糊距離。
spread 陰影的尺寸。
color 陰影的顏色。
inset 將外部陰影 (outset) 改為內部陰影。
以上 h-shadow ，v-shadow是必須要設置的，其他的可以根據需要去設置。
我們給上面的div元素添加陰影：
<div class="box"></div>
css樣式：
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
瀏覽器中查看效果：
border-image 使用圖片設置邊框。
如下：
<div class="box"></div>
我們先給div元素的邊框顏色設置為透明（transparent），然后在使用圖片設置邊框：
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果：
童靴們可能不懂為啥屬性的前邊會有-webkit-、-o-這樣的前綴呢？這是因為好多瀏覽器都不支持CSS的新特性，所以寫這些專屬的前綴是為了兼容各瀏覽器。
上一篇CSS3文章最后也講過各瀏覽器的前綴，童靴們自己去看一下。
css3 入門簡介 ——css3開課啦！
當你感到悲哀痛苦時，最好是去學些什么東西。學習會使你永遠立于不敗之地。
關注小白前端，持續收到文章推送！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
