純css寫乙個好看的按鈕

2021-09-30 16:30:07 字數 1339 閱讀 5850

以下開關按鈕, 主要還是css陰影的使用, 大多數人知都卻很少用的, 單個元素可以使用多重陰影效果

以下是css

/* 開關站 */

.m-switch-station

.m-switch-station .u-head

.m-switch-station .u-head p

.m-switch-station .u-body

.m-switch-station .u-body .line-item

.m-switch-station .u-body .line-item .u-label

.m-switch-station .u-body .line-item .switch-box

.m-switch-station .switch-box .light-switch

.m-switch-station .switch-box .light-switch.on

.m-switch-station .switch-box .light-switch >span

.m-switch-station .switch-box .light-switch .s-off

.m-switch-station .switch-box .light-switch .s-on

.m-switch-station .switch-box .light-switch.on .s-off

.m-switch-station .switch-box .light-switch.on .s-on

.m-switch-station .switch-box .light-switch:not(.on) .s-on:hover,

.m-switch-station .switch-box .light-switch.on .s-off:hover

以下是html結構

環網開關站

指示燈1:

指示燈2:

指示燈3:

指示燈4:

指示燈5:

指示燈6:

以下是js

/** 環網開關組 **/

function switchstation () else

})})

}this.render();

return scope

}var myswitchstation = switchstation()

CSS好看的按鈕

好看的按鈕 style btn btn1 mouseout btn1 mouseover btn2 btn3 mouseout btn3 mouseover btn3 mousedown btn3 mouseup btn 2k3 style body button class btn title 好...

同級css使用乙個樣式 純CSS樣式寫乙個內凹圓

廢話不多說,直接上效果圖!這是html 單元管理 車位管理 商鋪管理 這是css 內凹圓 property left list list one list one before list one after list one after,list one before list one div be...

乙個好看的時間控制項

1.依賴包 compile com.wx.wheelview wheelview 1.3.3 2.在布局中使用 60dp android layout height 60dp android orientation vertical wx.wheelview widget wheelview and...