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