圓角 陰影 rgba 和 動畫

2021-09-06 16:34:32 字數 1809 閱讀 7239

設定某乙個角的圓角,比如設定左上角的圓角:

border-top-left-radius:30px 60px;

同時分別設定四個角: border-radius:30px 60px 120px 150px;

設定四個圓角相同:

border-radius:50%;

box-shadow:h-shadow v-shadow blur spread color inset;

分別設定陰影:水平偏移 垂直偏移 羽化大小 擴充套件大小 顏色 是否內陰影

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(相容ie);

2、rgba(0,0,0,0.1) 前三個數值表示顏色,第四個數值表示顏色的透明度

1、transition-property 設定過渡的屬性,比如:width height background-color

2、transition-duration 設定過渡的時間,比如:1s 500ms

3、transition-timing-function 設定過渡的運動方式

linear 勻速

ease 開始和結束慢速

ease-in 開始是慢速

ease-out 結束時慢速

ease-in-out 開始和結束時慢速

cubic-bezier(n,n,n,n)

比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)

曲線設定**:

4、transition-delay 設定動畫的延遲

5、transition: property duration timing-function delay 同時設定四個屬性

1、translate(x,y) 設定盒子位移

2、scale(x,y) 設定盒子縮放

3、rotate(deg) 設定盒子旋轉

4、skew(x-angle,y-angle) 設定盒子斜切

5、perspective 設定透視距離

6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示

7、translatex、translatey、translatez 設定三維移動

8、rotatex、rotatey、rotatez 設定三維旋轉

9、scalex、scaley、scalez 設定三維縮放

10、tranform-origin 設定變形的中心點

11、backface-visibility 設定盒子背面是否可見

1、@keyframes 定義關鍵幀動畫

2、animation-name 動畫名稱

3、animation-duration 動畫時間

4、animation-timing-function 動畫曲線

normal 預設動畫結束不返回

alternate 動畫結束後返回

8、animation-play-state 動畫狀態

paused 停止

running 運動

9、animation-fill-mode 動畫前後的狀態

none 不改變預設行為

forwards 當動畫完成後,保持最後乙個屬性值(在最後乙個關鍵幀中定義)

backwards 在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第乙個關鍵幀中定義)

both 向前和向後填充模式都被應用

10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性

5 3 CSS3圓角 陰影 rgba

設定某乙個角的圓角,比如設定左上角的圓角 border top left radius 30px 60px 同時分別設定四個角 border radius 30px 60px 120px 150px 設定四個圓角相同 border radius 50 box shadow h shadow v sh...

新增陰影和設定圓角

圓角 calayer layer theview layer layer setmaskstobounds yes layer setcornerradius theradius layer setborderwidth theborderwidth layer setbordercolor the...

圓角邊框和盒子陰影

語法 border radius lenth 其中每乙個值可以為數值或百分比的形式 技巧 讓乙個正方形變成圓圈 以上效果圖矩形的圓角,就不要用百分比了,因為百分比是表示高度和寬度的一半 而我們這裡矩形就只用高度的一般就好了。精確單位 語法 box shadow 水平陰影 垂直陰影 模糊距離 虛實 陰...