在網(wǎng)頁制作中合理應(yīng)用網(wǎng)頁邊框的樣式屬性

建企業(yè)網(wǎng)站的時(shí)候，會(huì)用到一些邊框，無論是表格或是div，布局的時(shí)候邊框可以做為一個(gè)分界線，讓內(nèi)容對比或襯托更加明顯。邊框的使用其實(shí)也很簡單，一個(gè)是邊框的粗細(xì)，另一個(gè)是邊框的顏色。可以對局部整體設(shè)置，也可以單獨(dú)設(shè)置上下左右四個(gè)方向的邊框。在CSS中有一個(gè)關(guān)于顏色的屬性：border-color，它一次可以接受最多4個(gè)顏色值。

border-color值：[<color>|transparent]{1,4} | inherit 初始值：對簡寫屬性未定義計(jì)算值：單個(gè)屬性（border-top-color，頂部邊框顏色）

如果網(wǎng)頁設(shè)計(jì)的邊框值小于4個(gè)，值復(fù)制就會(huì)起作用。如果設(shè)計(jì)人員希望h1元素有細(xì)的黑色上下邊框，而且有粗的灰色左右邊框，在CSS樣式中應(yīng)該這樣寫:

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ì)有不同的顏色。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和RGB值：

p{
    border-style:solid;border-width:thick;
    border-color:black rgb(25%,25%,25%)#808080 silver;}

也可以使用簡寫的方式一次性定義多個(gè)邊框，比如對某一個(gè)段落P進(jìn)行設(shè)置：

P{
    border:#cecece 1px solid; //四個(gè)邊框均為灰色1px
}

還有一些單邊border-color屬性。其原理與單邊樣式和寬度屬性相同。網(wǎng)站建設(shè)人員要為標(biāo)題指定一個(gè)實(shí)線黑色邊框，而且右邊框?yàn)閷?shí)線灰色，可以如下指定：

P{border-style:solid;border-color:black;border-right-color:gray;}

邊框四個(gè)方向?qū)?yīng)的屬性名稱：

頂部border-top-color、右側(cè)border-right-color、底部border-bottom-color、左側(cè)border-left-color

透明邊框的使用：
在有些情況下網(wǎng)頁制作人員可能想創(chuàng)建一個(gè)不可見的邊框。這就引人了邊框顏色值transparent（在CSS2中引入）。這個(gè)值用于創(chuàng)建有寬度的不可見邊框。假設(shè)你希望包含3個(gè)鏈接的一組鏈接有邊框，默認(rèn)地這些邊框不可見，不過，鼠標(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í)候使其可見。這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)（假設(shè)有可見的背景）。

警告：在IE7之前，IE/Win沒有提供對transparent的支持。在以前的版本中，IE會(huì)根據(jù)元素的color值來設(shè)置邊框顏色。

近在開發(fā)H5，ui稿給的border：1px solid,因?yàn)閡i稿上的寬度是750px，我們運(yùn)行的頁面寬度是375px，所以我們需要把所有尺寸/2。所以我們可能會(huì)想寫border：0.5px solid。但是實(shí)際上，我們看頁面渲染，仍然是渲染1px而不是0.5

示例代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
      }

      .flex {
        display: flex;
      }
      .item {
        margin-right: 10px;
        padding: 10px;
        font-size: 13px;
        line-height: 1;
        background-color: rgba(242, 243, 245,1);
      }
      .active {
        color: rgba(250, 100, 0, 1);
        font-size: 14px;
        border: 0.5px solid ;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <!-- <div class="item active">
        active
      </div> -->
      <div class="item">
        item1
      </div>
      <div class="item">
        item2
      </div>
      <div class="item">
        item3
      </div>
    </div>
  </body>
</html>

在沒active的情況下

他們的內(nèi)容都是占13px

在有active的情況下

active占了14px這個(gè)是沒問題的，因?yàn)樗黤ont-size是14px嘛，但是我們是設(shè)置了border的寬度是0.5px，但展現(xiàn)的卻是1px。

再來看看item

它內(nèi)容占了16px，它受到相鄰元素影響是14px+2px的上下邊框

為啥border是1px呢

在 CSS 中，邊框可以設(shè)置為 0.5px，但在某些情況下，尤其是低分辨率的屏幕上，瀏覽器可能會(huì)將其渲染為 1px 或根本不顯示。這是因?yàn)槟承g覽器和顯示設(shè)備不支持小于 1px 的邊框?qū)挾然虿荒軠?zhǔn)確渲染出這樣的細(xì)小邊框。

瀏覽器渲染機(jī)制

不同瀏覽器對于小數(shù)像素的處理方式不同。一些瀏覽器可能會(huì)將 0.5px 邊框四舍五入為 1px，以確保在所有設(shè)備上的一致性。

設(shè)備像素比

在高 DPI（如 Retina 顯示器）設(shè)備上，0.5px 邊框可能看起來更清晰，因?yàn)檫@些設(shè)備可以渲染更細(xì)的邊框。
在低 DPI 設(shè)備上，0.5px 邊框可能會(huì)被放大或者根本不會(huì)被顯示。

解決辦法

方法一：使用偽類和定位

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
}
.active::after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 1px #ff892e solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

另外的item的內(nèi)容高度也是14px了符合要求

方法二：使用陰影，使用F12看的時(shí)候感覺還是有些問題

.active2 {
  margin-left: 10px;
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  box-shadow: 0 0 0 0.5px #ff892e;
}

方法三：使用svg，但這種自己設(shè)置了寬度。

<div class="active">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
  </svg>
  active
</div>

方案四：使用svg加定位，也比較麻煩，而且有其他的問題

<div class="active">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
    </svg>
    <div class="content">active</div>
</div>

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  display: inline-block; 
}
.active svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  box-sizing: border-box;
}
.active .content {
  position: relative;
  z-index: 1; 
}

方法五：使用一個(gè)父元素比較麻煩

<div class="border-container">
  <div class="active">active</div>
</div>

.border-container {
  display: inline-block;
  padding: 0.5px; 
  background-color: #ff892e; 
}

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  background-color: white; 
}

最后

在公司里，我們使用的都是方案一，這樣active和item它們的內(nèi)容高度都是14px了。然后我們再給他們的父盒子加上 align-items: center。這樣active的高度是14px，其他都是13px了。但是active的高度會(huì)比其他item的盒子高1px，具體看個(gè)人需求是否添加吧。

景樣式

1.背景屬性縮寫

Background: 背景色背景圖片背景平鋪方式背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

縮寫后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸樣式

1.寬度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

邊框樣式

1.邊框線

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 設(shè)置上邊框線

border-bottom-style 設(shè)置下邊框線

border-left-style 設(shè)置左邊框線

border-right-style 設(shè)置右邊框線

2.邊框?qū)挾?/p>

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

border-top-width 設(shè)置上邊框?qū)挾?/p>

border-bottom-width 設(shè)置下邊框?qū)挾?/p>

border-left-width 設(shè)置左邊框?qū)挾?/p>

border-right-width 設(shè)置右邊框?qū)挾?/p>

3.邊框顏色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

border-top-color 設(shè)置上邊框顏色

border-bottom-color 設(shè)置下邊框顏色

border-left-color 設(shè)置左邊框顏色

border-right-color 設(shè)置右邊框顏色

4.邊框樣式縮寫

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

縮寫后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外邊距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 設(shè)置上邊的外邊距

margin-bottom 設(shè)置下邊的外邊距

margin-left設(shè)置左邊的外邊距

margin-right設(shè)置右邊的外邊距

縮寫型式：

margin: 上邊距右邊距下邊距左邊距

margin: 上下邊距左右邊距

margin: 上邊距左右邊距下邊距

內(nèi)邊距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 設(shè)置上邊的內(nèi)邊距

padding-bottom 設(shè)置下邊的內(nèi)邊距

padding-left設(shè)置左邊的內(nèi)邊距

padding-right設(shè)置右邊的內(nèi)邊距

縮寫型式：

padding: 上邊距右邊距下邊距左邊距

padding : 上下邊距左右邊距

padding : 上邊距左右邊距下邊距

列表樣式

1.項(xiàng)目符號

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*實(shí)心圓*/

ul { list-style-type:circle;}/*空心圓*/

ul { list-style-type:square;}/*實(shí)心方塊*/

ul { list-style-type:none;}/*不顯示項(xiàng)目符號*/

ol { list-style-type:decimal;}/*阿拉伯?dāng)?shù)字*/

ol { list-style-type:lower-roman;}/*小寫羅馬數(shù)字*/

ol { list-style-type:upper-alpha;}/*大寫英文字母*/

2.自定義項(xiàng)目符號

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

鏈接樣式

1.鏈接沒有被訪問時(shí)的樣式

a:link

例： a:link { color:#ff0000; }

2.鏈接被訪問后的樣式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠標(biāo)懸停在鏈接上的樣式

a:hover

例： a:link { background-color:#ccc; }

4.鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式

a:active

例：a:active { background-color:#ff0000;}

在線咨詢

上一篇：推薦7個(gè)Vue 3的高顏值UI組件庫
下一篇：Spring MVC入門示例

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

在網(wǎng)頁制作中合理應(yīng)用網(wǎng)頁邊框的樣式屬性

為啥border是1px呢

瀏覽器渲染機(jī)制

設(shè)備像素比

解決辦法

方法一：使用偽類和定位

方法二：使用陰影，使用F12看的時(shí)候感覺還是有些問題

方法五：使用一個(gè)父元素 比較麻煩

最后

您的項(xiàng)目需求

方法五：使用一個(gè)父元素比較麻煩