色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中制作立體按鈕

錢諍諍1年前6瀏覽0評論

CSS中制作立體按鈕是通過利用邊框樣式和顏色的變化來展現(xiàn)立體感。以下是制作立體按鈕的代碼:

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: 2px solid #2E8B57;
border-radius: 5px;
box-shadow: 0px 3px 0px #2E8B57;
}
.btn:hover {
background-color: #3E8E41;
border: 2px solid #288E27;
box-shadow: 0px 3px 0px #288E27;
}

首先,我們創(chuàng)建了一個class名為.btn的按鈕。通過設(shè)置display屬性為inline-block,按鈕會在父元素中占據(jù)一定的空間,同時保留了塊元素的特性。接著,我們設(shè)置了按鈕的padding、background-color和color屬性。padding用于控制按鈕的內(nèi)邊距大小,background-color控制按鈕背景顏色,color控制按鈕文本顏色。

接著,我們設(shè)置按鈕的邊框樣式和顏色。設(shè)置border屬性控制按鈕邊框的寬度和樣式,同時設(shè)置了邊框顏色為#2E8B57。設(shè)置border-radius屬性可以讓按鈕的角變得圓滑。同時,我們設(shè)置了box-shadow屬性來制作立體感。第一個參數(shù)是水平偏移量,第二個參數(shù)是垂直偏移量,第三個參數(shù)是模糊半徑,最后一個參數(shù)是陰影顏色。

在.btn:hover偽類中,我們設(shè)置了按鈕在鼠標(biāo)懸停時的樣式,通過改變background-color、border和box-shadow屬性的值來營造出立體感。

通過以上的代碼,我們可以很容易地制作出一個具有立體感的按鈕。