CSS3文本效果
text-shadow:適用于文本陰影作郭,可以指定是水平陰影還是垂直陰影鲸匿、模糊的距離以及陰影的顏色。
box-shadow:適用于盒子陰影镊绪。同上匀伏。可以在::after和::before兩個偽元素中添加陰影效果蝴韭。
text-overflow:文本溢出屬性指定應(yīng)向用戶如何顯示溢出內(nèi)容
有兩個屬性:ellipsis(以省略號的形式隱藏內(nèi)容)和clip(直接截斷內(nèi)容)
word-wrap:強制換行够颠,但是單詞中間不換行
word-break:單詞可進行拆分然后換行
CSS3 2D轉(zhuǎn)換
2D變換方法:
translate():平移
rotate():在一個給定度數(shù)順時針旋轉(zhuǎn)的元素
scale():縮放
skew():傾斜
matrix():矩陣
為了添加某種效果可以從一個樣式轉(zhuǎn)變到另一個的時候,無需使用flash動畫或JavaScript榄鉴,只需要鼠標(biāo)移動到上面就可以履磨。
我們要實現(xiàn)這樣的效果,必須規(guī)定兩項內(nèi)容:
指定要添加效果的 CSS屬性 和 效果的持續(xù)時間
CSS3過渡
所有的過渡屬性:
transition:簡寫屬性庆尘,用于在一個屬性中設(shè)置四個過渡屬性
transition-property:規(guī)定應(yīng)用過渡的CSS屬性的名稱
transition-duration:定義過渡效果花費的時間剃诅,默認是0
transition-timing-function:規(guī)定過渡效果的時間曲線,默認是‘ease‘
transition-delay:規(guī)定過渡時間何時開始驶忌,默認是0
CSS3彈性盒子(Flex Box)
是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞健?/p>
彈性盒子由彈性容器和彈性子元素組成矛辕。彈性容器通過設(shè)置display屬性的值為flex或inline-flex(行內(nèi)元素設(shè)置為Flex布局)將其定義為彈性容器。
注:設(shè)為了Flex布局以后位岔,子元素的float如筛、clear和virtical-align屬性將失效。
彈性容器內(nèi)包含一個或多個彈性子元素抒抬。
注意:彈性容器外及彈性子元素內(nèi)是正常渲染的杨刨,彈性盒子只定義了彈性元素的如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示擦剑,默認情況每個容器只有一行妖胀。
修改排列方式:rtl(right to left)
body { direction: rtl; }
彈性容器上的屬性共有6個:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
①flex-direcion:決定了主軸的方向(即彈性子元素在父容器中的排列方向)。
語法:flex-direction: row | row-reverse | column | column-reverse
row:橫向從左到右排列惠勒。默認的排列方式赚抡。
row-reverse:反轉(zhuǎn)橫向排列(右對齊,從后往前排纠屋,最后一項排在最前面)
column:縱向排列涂臣。
column-reverse:反轉(zhuǎn)縱向排列,從后往前排,最后一項排在最上面赁遗。
②flex-wrap:默認情況下署辉,項目都排在一條線上,該屬性定義如果一條軸線排不下岩四,如何換行哭尝。
語法:flex-wrap: nowrap | wrap | wrap-reverse
③flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值是row nowrap剖煌。
④justify-content:定義了項目在主軸上的對齊方式材鹦,把彈性項沿著彈性容器的主軸線對齊。
語法:justify-content: flex-start | flex-end | center | space-between | space-around
flex-start:左對齊
flex-end:右對齊
center:居中
space-between:兩端對齊耕姊,項目之間的間隔都是相等的
space-around:每個項目兩側(cè)的間隔相等桶唐,所以項目之間的間隔比項目與邊框的間隔大一倍。
⑤align-items:定義項目在交叉軸上如何對齊箩做。
語法:align-items: flex-start | flex-end | center | baseline | strench
baseline:項目的第一行文字的基線對齊
strench(默認值):如果項目未設(shè)置高度或設(shè)為auto莽红,將占滿整個容器的高度。
⑥align-content:定義了多根軸線的對齊方式邦邦。如果項目只有一根軸線安吁,該屬性不起作用。
語法:align-content: flex-start | flex-end | center | space-between | space-around | strench(默認值)
彈性子元素上的6個屬性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
①order :定義彈性子元素的排列順序燃辖。數(shù)值越小鬼店,排列越靠前,默認為0黔龟。
語法:order: <integer>
②flex-grow:定義項目的放大比例妇智,默認為0,即如果存在剩余空間氏身,也不放大巍棱。
語法:flex-grow: <number>
③flex-shrink:定義項目的縮小比例,默認為1蛋欣,即如果空間不足航徙,該項目將縮小。負值對該屬性無效陷虎。
語法:flex-shrink: <number>
④flex-basis:定義了在分配多余空間之前到踏,項目占據(jù)的主軸空間。默認值為auto
⑤flex屬性是flex-grow尚猿、flex-shrink窝稿、flex-basis的簡寫,默認值是 0 1 auto凿掂。建議優(yōu)先使用這個屬性伴榔。該屬性有兩個快捷值: auto(1 1 auto) 和none(0 0 auto)。
⑥align-self:允許單個彈性子元素有與其他子元素不一樣的對齊方式〕碧荩可覆蓋align-items屬性骗灶,默認值為auto惨恭,表示繼承彈性容器的align-items屬性秉馏,如果沒有父元素,則等同于strench脱羡。