今天在學習css3時，看到了乙個比較有趣的效果：按鈕有背景色，滑鼠懸停時，背景色變為白色，並且有和原來背景色一樣的邊框。
在vscode上自己碼**時發現了問題：懸停時會影響的其他元素的位置，即按鈕之後的元素，會在滑鼠懸停在按鈕時，位置向下移動。
經過檢查發現，因為我的按鈕邊框是在懸停效果時加的，在css3的預設情況下，該按鈕元素會在原來的寬度，高度基礎上再加上邊框的粗細，從而改變了該元素的大小，影響了其他元素的布局。
解決方法：
一、按鈕元素新增宣告box-sizing：border-box該宣告允許元素width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)。即宣告了高度和寬度後，再改變邊框和內邊距，是不會影響這個元素的實際大小的。但這個方法有個不便之處，要計算內邊距以及元素的width和height。
二、元素宣告邊框，但邊框透明。之後在:hover新增邊框即可。一開始我們就宣告了乙個透明的邊框，後來只是改變邊框顏色而已，所以不會增加額外的大小。
**：方法一
button.button_color
button.button_color:hover
button.button_color
button.button_color:hover
CSS傾斜邊框 創意框邊框懸停效果
創意邊框title rel stylesheet href css style.css head class container class box class content 01h2 夜之城h3 驚魂 們的表現越來越狂暴 大街上充滿了癮君子們 他們為一種剛剛出現的娛樂項 目所沉迷 腦舞 腦舞十分...
MFC去除button按鈕的邊框以及改變按鈕顏色
mfc的button控制項是乙個不同於其他控制項，其cbuttton類是cwnd的乙個子類，在修改button的背景 顏色和邊框的時候必須自己進行編寫乙個新的類，如cmybutton。下面是進行背景 顏色 邊框修改的步驟 1.在專案 新增類 cmybutton。這樣會自動生成兩個檔案，乙個.cpp檔...
滑鼠懸停顯示CSS3動畫邊框
效果體驗 以下是 1 doctype html 2 html xmlns 3 head 4 meta charset utf 8 5 title css3滑鼠懸停顯示動畫邊框 柯樂義 title base target blank 6 link href type text css rel styl...