爲元素添加邊框，你有多少種好辦法？

時間 2019-11-24

標籤元素添加邊框多少辦法简体版

原文原文鏈接

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！javascript

做者：莫卓穎css

背景

相信你們在作項目的過程當中會常常遇到這樣的一個需求，鼠標hover到某個元素的時候爲這個元素添加邊框，這個簡單的需求僅需注意添加邊框後不會對原有的位置形成佈局的影響從而形成佈局跳動。本文將會試圖探討完成這個簡單需求的方法。html

方案一

實現思路：爲元素中預先設置邊框，邊框的顏色與元素所在父元素背景色一致，邊框大小與hover時候的邊框大小一致，鼠標hover過元素的時候只須要設置邊框顏色即可。

兼容問題：無

實現代碼：
前端

html結構

<ul class="parent">
    <li> </li>
    <li>
    </li>
</ul>複製代碼

CSS

.parent{
  width: 500px;
  background: #000;
  overflow: hidden;
}
.parent li{
  width: 200px;
  background: red;
  border: 2px solid #000;
  margin-right: 2px;
  height: 200px;
  float: left;
}
.parent li:hover{
  border:2px solid yellow;
}複製代碼

方案二

實現思路：首先設置元素爲position:relative,而後添加額外隱藏的邊框元素，鼠標hover過元素的時候顯示提早隱藏的邊框元素

兼容問題：無

實現代碼：
java

####HTML結構web

<ul class="parent">
  <li>
      <div class="bd"></div>
  </li>
    <li>
    <div class="bd"></div>
    </li>
</ul>複製代碼

####CSS服務器

.parent{
  width: 500px;
  background: #000;
  overflow: hidden;
}
.parent li{
  position: relative;
  width: 200px;
  background: red;
  border: 2px solid #000;
  margin-right: 2px;
  height: 200px;
  float: left;
}
.parent li .bd{
  display: none;
  left: 0;
  top:0;
  width:198px;
  height: 198px;
  border: 2px solid yellow;
}
.parent li:hover .bd{
  display: block;
}複製代碼

方案三

實現思路：當hover過元素的時候，利用設置屬性box-sizing設置容器爲怪異模式，即設置盒模型爲容器width = border + padding + 內width

兼容問題：
佈局

實現代碼：雲計算

####HTML結構spa

<ul class="parent">
            <li> </li>
            <li>
            </li>
        </ul>複製代碼

####CSS

.parent{
            width: 500px;
            background: #000;
            overflow: hidden;
        }
        .parent li{
            width: 200px;
            background: red;
            margin-right: 2px;
            height: 200px;
            float: left;
        }
        .parent li:hover{
            box-sizing:border-box;
            border: 2px solid yellow;
        }複製代碼

方案四

實現思路：當hover過元素的時候，利用h5的新屬性box-shadow爲元素添加實體的陰影做爲邊框

兼容性：

實現代碼：

####HTML結構

<ul class="parent">
            <li> </li>
            <li>
            </li>
        </ul>複製代碼

####CSS

.parent{
    width: 500px;
    background: #000;
    overflow: hidden;
  }
  .parent li{
    width: 200px;
    background: red;
    margin-right: 2px;
    height: 200px;
    float: left;
  }
  .parent li:hover{
    box-sizing:border-box;
    box-shadow: inset 2px 2px 0 0 yellow,inset -2px -2px 0 0 yellow;
  }複製代碼

您還能想到其餘好辦法爲hover的元素加"套"麼？歡迎留言討論