1. 程式人生 > >css樣式筆記

css樣式筆記

1、opacity 透明度 0透明 1可見
2、 多背景設定
linear-gradient 線性漸變
radial-gradient 徑向漸變
text-shadow 文字陰影
box-shadow 盒子陰影
border-radius 圓角設定
filter 濾鏡
3、相對定位(relactive)
1,提升層級
2,元素不脫離文件流。位移之後,原始的位置會被保留
3,對元素本身的特性沒有影響
4,如果沒有偏移量,對元素本身沒有影響
4、 絕對定位
1,提升層級
2,完全脫離文件流
3,讓內聯元素支援寬高
4,沒有設定寬度的時候,預設由內容撐開寬度
5,有定位父級的時候,相對於定位父級發生偏移,沒有,則相對於document發生偏移
6,相對定位一盤是配合絕對定位來使用的
絕對定位元素和相對定位元素的層級是一樣的
固定定位的特性和絕對定位基本一致,區別在於固定定位是始終相對於可視區來進行定位的
它會固定在可視區,不會隨著滾動條滾動
IE6不支援固定定位
6、 z-index

:定位層級
接收一個數字 1~3
這個屬性只能用於定位元素
最好在兄弟級元素之間比較層級
7、邊框如果沒有給顏色,那麼預設會用文字的顏色
transparent 透明
rgba(255,255,255,0.4) 可以調整透明度的顏色(用在哪裡影響就在哪裡 不會 影響到其他地方)
Opacity 影響整塊的所有內容

img標籤 可以直接設定width/height屬性 (屬性裡面可以不加單位)
8、transition:
第一個值:可選 裡面可以放一個屬性(要過渡的屬性)

transition-property  要過渡的樣式  (all || [attr] || none)
transition-duration 過渡時間
transition-delay 延遲時間
transition-timing-function 運動形式
    ease:(逐漸變慢)預設值
    linear:(勻速)
    ease-in:(加速)
    ease-out:(減速)
    ease-in-out:(先加速後減速)
    cubic-bezier 貝塞爾曲線( x1, y1, x2, y2 )
     http://cubic-bezier.com/

9、漸變