css 圓形背景icon CSS爬坑小結

2021-10-13 22:40:57 字數 2693 閱讀 6554

強迫症,有時候乙個小細節真的會揪很久,尤其是相容性問題。
.line

我超一行省略點點點長的長的長的長的長的長的文字

//文字長度未知,單行居中,多行居左. 用第一種方法吧~~~~自從發現有text-align-last這個屬性之後

.p1.p2

// 文字單行居中 多行居中,兩端對齊

.p2//文字不換行 單行省略點點點

.p2//超出兩行省略點點點

.p2

div

li //巧用not非選擇器

要點:3d柱子,圖表柱子的長寬可配置,高度隨著var改變,各面的顏色可配置。需要特殊處理長度0

小技巧: 巧用transition: all 1s; 來看變化的過渡過程。如果某個計算很hack很繞,一定是姿勢不對,多問問集思廣益,一定有更簡潔的辦法

想到了以下幾種方式實現:

border: 畫2個深色背景梯形+2個淺色前景三角形,疊在一起啊

3d旋轉 transform: rotatex(10deg) rotate(30deg); 先畫正面3d立方體,再旋轉兩次,xy的旋轉順序很關鍵

svg:沿著path路徑畫就好了

skew:用transform: skew,先畫2個淺色右斜的背景平行四邊形,再畫2個深色左斜的前景平行四邊形

用推拉門的思路,兩段式背景填充。左半和右半推拉實現 總長度的變化。適用伸縮晾衣桿(水平方向紋理均勻)。

用.9圖(點9圖 設計師詞彙)的思路,三段式背景填充。左右固定,中間用背景圖repeat-x自適應填充。適用王思聰的熱狗麵包(水平紋理可重複)

問題描述:「瓜分67182元大獎」,金額在滾動的時候,由於不等寬字型,造成左右元素晃動。一般思路,預留寬度n*14px+2px,強行設定寬度,且預留2px的buff,在不同機型上,適配會有問題,比如使用者設定了放大加粗字型等。

解題思路:由經驗知,數字「8」是最寬的字型,先用乙個全是8的佔位,且設定隱藏,再把真實數值絕對定位absolute蓋在上面,設定水平居中,完美

參考閱讀:檢視

間隔平均分:父容器使用:justify-content: space-around;精髓:為防止不滿9個的時候,最後一行元素不靠左,使用3個高度為0的transparent的div佔坑,老哥穩!這樣的話,不管7個8個都是ok的。不然會變成右圖這樣。

main 

footer

}}

.icon-risk

.tite
先占個坑...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...

自定義圓形背景的TextView

繼承textview類,首先是構造方法,兩參 構造是解析布局檔案時呼叫的,所以相關的操作在這個方法中定義.在ondraw 方法裡,使用canvas.drawcircle float cx,float cy,float radius,paint paint 方法繪製乙個圓.圓的顏色由paint引數決定...

css背景,背景位置,背景平鋪,背景拉伸,背景附著

css背景 css背景 背景顏色 background color black 背景 background imag url 位址 背景平鋪 不平鋪 background repeat no repeat 橫向平鋪 background repeat repeat x 縱向平鋪 background...