在網頁制作中合理應用網頁邊框的樣式屬性

建網站  時間:2020-12-14  418 次瀏覽  網頁邊框

建企業網站的時候,會用到一些邊框,無論是表格或是div,布局的時候邊框可以做為一個分界線,讓內容對比或襯托更加明顯。邊框的使用其實也很簡單,一個是邊框的粗細,另一個是邊框的顏色??梢詫植空w設置,也可以單獨設置上下左右四個方向的邊框。在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

未命名-2.jpg

透明邊框的使用:
在有些情況下網頁制作人員可能想創建一個不可見的邊框。這就引人了邊框顏色值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值來設置邊框顏色。


本文地址:在網頁制作中合理應用網頁邊框的樣式屬性 http://www.udvwvf.tw/technical/166.html


上一篇: ThinkPHP框架的WEB系統隱藏index.php文件名大全

下一篇: ThinkPHP在不同系統下的偽靜態規則匯總

最新信息
推薦信息
  1. 在鄭州有沒有高端一點的網站制作服務?
  2. 鄭州php網站建設選擇哪家公司好呢?
  3. 利用H5響應式網站建設技術做好高端響應式網站的設計開發
  4. 單個網頁的seo優化應該怎么做?
建企業網站
建企業網站


双色球杀号公式 亿客隆 排列5开奖号码今天晚上 新时时彩历史数据 - 点击进入 吉林11选5任3遗漏数据 广西快乐10分通5遗漏 山西11选5开奖直播 北京pk10前三位跨度值 vr赛车开奖网 贵州11选5任三技巧 福建11选5手机版下载 河南11选5走势图一定牛 湖北11选5中奖规则 极速赛车7码选号技巧 天津时时彩开奖时间 北京赛车下注网站信誉好的 网上玩云南时时彩