為元素新增邊框,你有多少種好辦法?

2021-09-11 11:05:30 字數 1049 閱讀 6932

相信大家在做專案的過程中會經常遇到這樣的乙個需求,滑鼠hover到某個元素的時候為這個元素新增邊框,這個簡單的需求僅需注意新增邊框後不會對原有的位置造成布局的影響從而造成布局跳動。本文將會試圖**完成這個簡單需求的方法。

實現思路:為元素中預先設定邊框,邊框的顏色與元素所在父元素背景色一致,邊框大小與hover時候的邊框大小一致,滑鼠hover過元素的時候只需要設定邊框顏色便可。

相容問題:無

實現**:

html結構

複製**
####css

.parent

.parent li

.parent li .bd

.parent li:hover .bd複製**

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

相容問題:

實現**:

####html結構

class

="parent">

li>

li>

複製**

####css

.parent

.parent li

.parent li:hover複製**

實現思路:當hover過元素的時候,利用h5的新屬性box-shadow為元素新增實體的陰影作為邊框

相容性:

實現**:

####html結構

class

="parent">

li>

li>

複製**

####css

.parent

.parent li

.parent li:hover複製**

前端識別驗證碼思路分析

上雲之路,從選購雲伺服器開始

service worker 全面高階

為元素新增邊框,有多少種好方法

相信大家在做專案的過程中會經常遇到這樣的乙個需求,滑鼠hover到某個元素的時候為這個元素新增邊框,這個簡單的需求僅需注意新增邊框後不會對原有的位置造成布局的影響從而造成布局跳動。本文將會試圖 完成這個簡單需求的方法。實現思路 為元素中預先設定邊框,邊框的顏色與元素所在父元素背景色一致,邊框大小與h...

25種很土的習慣,你有多少?

1.照相時做v字形手勢 天啊,救救這個老土的人吧!哪怕你站得像一截木樁呢。2.不學電腦不上網 搞清楚你生活在什麼時代沒有?3.永遠由男士買單 憑什麼男人就一定要出血,你一定就一毛不拔?在womenpower日益強大的21世紀,女性買單倒顯得很時尚。4.愛上浪子型的男人 他們已經過時了,現在流行的是 ...

絕地求生 想知道你有多少種死法嗎?

絕地求生,是一款開放世界策略射擊遊戲,採用虛幻4引擎製作。是一款大逃殺型別的遊戲,每一局遊戲將有100名玩家參與,他們將被投放在絕地島 battlegrounds 的上空,遊戲開始跳傘時所有人都一無所有。遊戲展開的方式是 玩家赤手空拳地分布在島嶼的各個角落,利用島上多樣的 與道具。隨著時間的流逝,島...