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