微信小程序css篇----所有屬性(按字母排列:b開頭)

今天星期六,本來想着先玩兩把LOL,不過一想到後天小程序就全面公佈了,細思極恐啊,爲了到開發的時候順暢,還是忍住了玩的衝動,繼續來熟悉微信小程序裏的對css屬性的支持,因爲b開頭的比較多,大概就是bg了,border,bottom,box等等屬性,先上圖看看有多少:

以上,那詳細來看看,分個幾大類吧:

一:backface-visibility:屬性定義當元素不面向屏幕時是否可見。就是在動畫裏旋轉後,背面是不是顯示。取值有:visible(可見),hidden(不可見)。

二:background,背景。之前有單獨寫背景看這裏

三:behavior:只有IE支持這個屬性。就不說了。

四:block-size:邏輯寬度,取決於元素的writing-mode。Firefox支持。

五:border:邊框。請看微信小程序css篇----邊框(Border)

六:bottom:設置圖像的底部邊緣。

對於絕對定位元素,bottom屬性設置單位高於/低於包含它的元素的底邊。

對於相對定位元素,bottom屬性設置單位高於/低於其正常位置的元素的底邊。

七:box:盒子屬性:

1. box-decoration-break: 取值:clone(克隆),slice(片式)。詳情,還是看圖:

2.box-shadow:陰影:  box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平陰影位置,允許負值。必須有

v-shaddow:垂直陰影的位置,允許負值。必須有

blur:模糊距離,可有。

spread:陰影的大小,可有。

color:陰影的顏色。可有

inset:從外層的陰影(開始時)改變陰影內側陰影。

3.box-size:取值:box-sizing: content-box|border-box|inherit:

兩個取值的區別在於是否會將pandding/margin算進去。

 view{
    margin: 20rpx;
    padding: 20rpx;
    width: 200rpx;
    height: 200rpx;
    box-shadow: 10px 10px 5px #888888;
    box-sizing:content-box;
 }

八:break-after,break-before,break-inside:主要是頁面要是分頁的時候屬性。

       break-after   break-before   break-inside    這個網站裏有詳細的解釋。

還好之前將background跟border給單獨記錄了。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章