css樣式 部分

2021-10-19 18:44:22 字數 1471 閱讀 3960

css3-部分樣式

邊框:border-radius:圓角邊框,可以寫絕對值,也可以寫百分比(可以讓不同的方向進行改變)

box-shadow:陰影,從左往右,分別為水平偏移方向,垂直偏移方向,模糊半徑(陰影大小),擴充套件半徑(變大),最後乙個是陰影顏色

box-shadow:0 0 0 0 color(可以使用半透明:ragb(0,0,0,0))
乙個class可以引入多個類

背景background-size:大小

background-origin:規定背景的定位區域,從什麼地方開始

background-repeat:平鋪方式

文字效果

text-shadow:文字陰影,有水平,垂直,模糊三個值,和box-shadow一樣,但是少了擴充套件

字型@font-face:使用自定義字型

2d轉換

通過transform來實現。

translate():位移,下面**表示水平和垂直方向各位移100畫素,第乙個變數為x軸,第二個變數為y軸。變換的過程中,位置不變。

transform:trnslate(100px,100px)
rotate():旋轉角度,順時針旋轉,deg為旋轉的符號

transform:rotate(10deg)
scale():縮放 表示縮放2倍

transform:rotate(10deg) scale(2)
skew:推到,表示在x,y軸推到45度,可以在x和y 進行推到斜切

transform:skew(45deg)
matrix():矩陣,一般不用

過渡

transition:屬性,移動,從哪兒移動到哪兒

transition-delay

linear:勻速;ease:滿加速到勻速最後變慢結束;cubl-bezier:貝塞爾曲線,通過兩個錨點對線條進行控制,利用貝塞爾曲線可以模擬各種物體的運動模式。

動畫

@keyframes 通過關鍵幀進行規則

animation 通過屬性進行調整(具體可查w3c中css動畫)

animation:animation-name:動畫名稱,後面的name可以修改;

書寫解釋:屬性:名字,時間,方式,次數

​ animatename從哪兒開始,到哪兒結束

書寫方法:

animation:animation-name 3s linear 1

@keyframes animatename

to}第二種方法:

@keyframes animatename

100%

}

css樣式部分(1)

1 border sizng你用過嗎?它的屬性值分別有哪些?他們的作用是什麼?標準w3c下的盒模型和ie下的盒模型有什麼區別?1 box sizing content box border box inherit border sizing有三個屬性值,它們分別是content box,border...

css樣式整理部分part1

此篇為了整理自己在調整css樣式中遇到過的問題 1.內容過長時,使用省略號代替 overflow hidden text overflow ellipsis white space nowrap 2.滾動條的粗細 includes lists webkit scrollbar lists webki...

css背景樣式css背景樣式

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