直接上**
1最終實現的效果:.selected:after
11.selected:before
思路:用元素的偽類實現!
1.:after中使用border繪製出三角形
2.:before中繪製長方形的一半,作為對勾
3.在js**中通過新增class類名的方法,我的業務場景是v-for迴圈出的div,當id相等的時候新增這個樣式的類名,即可實現該效果。
第二種思路是:
下方的藍色三角形自己切一張圖放在after偽類中,該偽類的content中新增上『✅』對應的 content:"\2714";調整一下對應的樣式也可以實現該業務需求
CSS3實現打勾 效果
樣式屬性 關於打勾 效果,應該都不陌生。eg 我們在某些商場,支付的時候,支付成功會有個成功的標識,就像下面這樣 我們看,這個效果的html結構 標籤作為畫布 標籤來畫 外圍的圓 標籤來畫 屬性 fill none 設定背景顏色為無色 stroke 68e534 設定圓的主題顏色 同 stroke ...
讓Tab Bar的Item不被選中時不變灰色
為了讓tabbar的按鈕沒有被選中時,仍然保持原來的顏色 設定繪製模式,使不變灰 uitabbaritem onebaritem uitabbaritem alloc init onebaritem.image uiimage imagenamed news imagewithrenderingmo...
CSS設定選中網頁文字時的背景和顏色
在網頁中,選中某段文字,預設的顯示效果為 可以看到,選中後文字顏色為白色,背景為藍色。現我們想設定,選中後文字為紅色,背景為黃色。需要用到css偽類 selection。ie9 opera google chrome safari都支援 selection 選擇器。firefox 通過其私有屬性 m...