react-native支援的css樣式

ReactNative中能使用的css樣式

“alignItems”,居中對齊彈性盒的各項

元素
例：alignItems:‘center’,
stretch(專案被拉伸以適應容器)
center(專案位於容器的中心)
flex-start(專案位於容器的開頭)
flex-end(專案位於容器的結尾)
baseline(專案位於容器的基線上)
initial(設定該屬性為它的預設值)
inherit(從父元素繼承該屬性)

“alignSelf”,居中對齊彈性物件元素內的某個項
例：alignSelf:‘center’,
auto(預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 “stretch”)
stretch(專案被拉伸以適應容器)
center(專案位於容器的中心)
flex-start(專案位於容器的開頭)
flex-end(專案位於容器的結尾)
baseline(專案位於容器的基線上)
initial(設定該屬性為它的預設值)
inherit(從父元素繼承該屬性)

“backfaceVisibility”,當元素不面向螢幕時是否可見
例：backfaceVisibility:‘visible’
visible (背面是可見的)
hidden (背面是不可見的)

“backgroundColor”,背景色
例：backgroundColor:‘red’
例：backgroundColor:’#cccccc’
color (指定背景顏色。在CSS顏色值近可能的尋找一個顏色值的完整列表)
transparent (指定背景顏色應該是透明的。這是預設)
inherit (指定背景顏色，應該從父元素繼承)

“borderBottomColor”,底部邊框顏色
例：borderBottomColor:‘red’
例：borderBottomColor:’#cccccc’
color (指定背景顏色。在CSS 顏色值 查詢顏色值的完整列表)
transparent (指定邊框的顏色應該是透明的。這是預設)
inherit (指定邊框的顏色，應該從父元素繼承)

“borderBottomLeftRadius”,左下角新增圓角邊框
例：borderBottomLeftRadius:10

“borderBottomRightRadius”,右下角新增圓角邊框
例：borderBottomRightRadius:10

“borderBottomWidth”,底部邊框寬度
例：borderBottomWidth:8

“borderColor”,四個邊框顏色
例：borderColor:’#00ff00’

“borderLeftColor”,左邊框顏色
例：borderLeftColor:‘yellow’

“borderLeftWidth”,左邊框寬度
例：borderLeftWidth:10

“borderRadius”,四角圓角弧度
例：borderRadius:15

“borderRightColor”,右邊框顏色
例：例：borderRightColor:‘yellow’

“borderRightWidth”,右邊框寬度
例：borderRightWidth:10

“borderStyle”,四個邊框的樣式
例：borderStyle:‘dotted’
none 定義無邊框。
hidden 與 “none” 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed 定義虛線。在大多數瀏覽器中呈現為實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。
groove 定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge 定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset 定義 3D inset 邊框。其效果取決於 border-color 的值。
outset 定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit 規定應該從父元素繼承邊框樣式。

“borderTopColor”,上邊框顏色
例：borderTopColor：‘red’

“borderTopLeftRadius”,左上角圓角弧度
例：borderTopLeftRadius：3

“borderTopRightRadius”,右上角圓角弧度
例：borderTopRightRadius：4

“borderTopWidth”,頂部邊框寬度
例：borderTopWidth：13

“borderWidth”,四個邊框的寬度
例：borderWidth：2

“bottom”,影象的底部邊緣
例：bottom:20

“color”,顏色
例：color:‘red’

“elevation”,Z軸，可產生立體效果
例：elevation:1

“flex”,讓所有彈性盒模型物件的子元素都有相同的長度，忽略它們內部的內容
例：flex:1

“flexDirection”,設定

元素內彈性盒元素的方向為相反的順序
例：flexDirection:‘column’
row ((預設值。靈活的專案將水平顯示，正如一個行一樣)
row-reverse (與 row 相同，但是以相反的順序)
column (靈活的專案將垂直顯示，正如一個列一樣)
column-reverse (與 column 相同，但是以相反的順序)
initial (設定該屬性為它的預設值。請參閱 initial)
inherit (從父元素繼承該屬性。請參閱 inherit)

“flexWrap”,讓彈性盒元素在必要的時候拆行
例：flexWrap:‘wrap’
nowrap (預設值。規定靈活的專案不拆行或不拆列)
wrap (規定靈活的專案在必要的時候拆行或拆列)
wrap-reverse (規定靈活的專案在必要的時候拆行或拆列，但是以相反的順序)
initial (設定該屬性為它的預設值。請參閱 initial)
inherit (從父元素繼承該屬性。請參閱 inherit)

“fontFamily”,字型
例：fontFamily:‘courier’

“fontSize”,字型大小
例：fontSize:20

“fontStyle”,
例：fontStyle:‘italic’
normal 預設值。瀏覽器顯示一個標準的字型樣式。
italic 瀏覽器會顯示一個斜體的字型樣式。
oblique 瀏覽器會顯示一個傾斜的字型樣式

“fontWeight”,文字的粗細
例：fontWeight:‘bold’
normal (預設值。定義標準的字元)
bold (定義粗體字元)
bolder (定義更粗的字元)
lighter (定義更細的字元)
100 (定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold)

“height”,設定元素的高度
例：height:200

“justifyContent”,在彈性盒物件的元素中的各項周圍留有空白
例：justifyContent:‘space-between’
flex-start (預設值。專案位於容器的開頭)
flex-end (專案位於容器的結尾)
center (專案位於容器的中心)
space-between (專案位於各行之間留有空白的容器內)
space-around (專案位於各行之前、之間、之後都留有空白的容器內)

“left”,把影象的左邊緣設定在其包含元素左邊緣向右5畫素的位置
例：left:20

“letterSpacing”,字母間距
例：letterSpacing:20

“lineHeight”,行高
例：lineHeight:30

“margin”,元素的所有四個邊距
例：

“marginBottom”,下邊距
例：marginBottom:50

“marginHorizontal”,水平間距，即左邊距和右邊距
例：marginHorizontal:10

“marginLeft”,左邊距
例：marginLeft:50

“marginRight”,右邊距
例：marginRight:50

“marginTop”,上邊距
例：marginTop:50

“marginVertical”,垂直間距，即上邊距和下邊距
例：marginVertical:10

“opacity”,透明度級別
例：opacity：0.5

“overflow”,設定overflow屬性進行滾動
例：overflow:‘hidden’
visible (預設值。內容不會被修剪，會呈現在元素框之外)
hidden (內容會被修剪，並且其餘內容是不可見的)
scroll (內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容)

“overlayColor”,
例：

“padding”,填充
例：

“paddingBottom”,下填充
例：

“paddingHorizontal”,左右填充
例：

“paddingLeft”,左填充
例：

“paddingRight”,右填充
例：

“paddingTop”,上填充
例：

“paddingVertical”,上下填充
例：

“position”,定位
例：position:‘fixed’
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative 生成相對定位的元素，相對於其正常位置進行定位。因此，“left:20” 會向元素的 LEFT 位置新增 20 畫素。
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）

“resizeMode”,使用者調整大小
例：resizeMode:‘cover’
cover 等比拉伸
strech 保持原有大小
contain 圖片拉伸 充滿空間

“right”,把影象的右邊緣設定在其包含元素右邊緣向左 5 畫素的位置
例：right:5

“rotation”,元素旋轉
例：rotation：180

“scaleX”,
例：

“scaleY”,
例：

“shadowColor”,
例：

“shadowOffset”,
例：

“shadowOpacity”,
例：

“shadowRadius”,
例：

“textAlign”,文字對齊方式
例：textAlign:‘left’
left 把文字排列到左邊。預設值：由瀏覽器決定。
right 把文字排列到右邊。
center 把文字排列到中間。
justify 實現兩端對齊文字效果

“textAlignVertical”,
例：

“textDecorationColor”,下劃線文字中下劃線的顏色
例：textDecorationColor:‘red’

“textDecorationLine”,顯示一條線
例：textDecorationLine:‘underline’
none 預設值。規定文字修飾沒有線條。 測試 »
underline 規定文字的下方將顯示一條線。 測試 »
overline 規定文字的上方將顯示一條線。 測試 »
line-through 規定文字的中間將顯示一條線

“textDecorationStyle”,顯示一條線的樣式
例：textDecorationStyle:‘solid’
solid 預設值。線條將顯示為單線。
double 線條將顯示為雙線。
dotted 線條將顯示為點狀線。
dashed 線條將顯示為虛線。
wavy 線條將顯示為波浪線

“textShadowColor”,文字陰影顏色
例：textShadowColor：‘red’

“textShadowOffset”,文字陰影偏移量
例：textShadowOffset:2

“textShadowRadius”,文字陰影圓角
例：textShadowRadius:3

“tintColor”,
例：

“top”,上
例：

“transform”,旋轉
例：
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設定 X 軸的值來定義縮放轉換。
scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。 測試
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視檢視

“translateX”,
例：

“translateY”,
例：

“width”,款
例：

"writingDirection"文字方向
auto’,’ltr’,’rtl