Css3基本用法

2021-07-05 11:06:26 字數 2094 閱讀 9948

1.border-image:將規定為包圍 div 元素的邊框

1. border-image-source 用在邊框的的路徑。  

border-image-slice  邊框向內偏移。  

border-image-width  邊框的寬度。  

border-image-outset 邊框影象區域超出邊框的量。  

border-image-repeat 影象邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 

2. border-radius 向 div 元素新增圓角邊框.前提是必須設定border並且當取值為border的一半時,可繪圓。

2. box shadow  向 div 元素新增陰影。

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

h-shadow 必需。水平陰影的位置。允許負值。 

v-shadow 必需。垂直陰影的位置。允許負值。

blur 可選。模糊距離。  

spread 可選。陰影的尺寸。 

color 可選。陰影的顏色。請參閱 css 顏色值。 

inset 可選。將外部陰影 (outset) 改為內部陰影。

3. background-clip 規定背景的繪製區域。

border-box 背景被裁剪到邊框盒。 

padding-box 背景被裁剪到內邊距框。 

content-box 背景被裁剪到內容框。 

4. background-origin 相對於內容框來定位背景影象。

padding-box 背景影象相對於內邊距框來定位。  

border-box 背景影象相對於邊框盒來定位。 

content-box 背景影象相對於內容框來定位。 

5. background-size 規定背景影象的尺寸。

6. text-overflow 規定當文字溢位包含元素時發生的事情。 

7.text-shadow 基礎的文字陰影效果。

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平陰影的位置。允許負值。 

v-shadow 必需。垂直陰影的位置。允許負值。

blur 可選。模糊的距離。 

color 可選。陰影的顏色。 

8.text-wrap 規定文字的換行規則。 

word-break 規定非中日韓文字的換行規則。 

word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行。並且單詞也會換行。 

9.transform 向元素應用 2d 或 3d 轉換。

通過 translate() 方法,元素從其當前位置移動,根據給定的 left(x 座標) 和 top(y 座標) 位置引數:

通過 rotate() 方法,元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。

通過 scale() 方法,元素的尺寸會增加或減少,根據給定的寬度(x 軸)和高度(y 軸)引數:

通過 skew() 方法,元素翻轉給定的角度,根據給定的水平線(x 軸)和垂直線(y 軸)引數:

10.過渡translation

transition-property 規定設定過渡效果的 css 屬性的名稱。 

transition-duration 規定完成過渡效果需要多少秒或毫秒。 

transition-timing-function 規定速度效果的速度曲線。 

transition-delay 定義過渡效果何時開始。 

11.@keyframes 規定動畫。 

animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。

animation-name 規定需要繫結到選擇器的 keyframe 名稱。。 

animation-duration 規定完成動畫所花費的時間,以秒或毫秒計。 

animation-timing-function 規定動畫的速度曲線。 

animation-delay 規定在動畫開始之前的延遲。 

12.opacity:設定div元素的不透明度。(0為完全透明,1為完全不透明)

css3基本語法

1.css邊框 圓角效果 border radius 2.css邊框 陰影 box ahadow box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 3.css邊框 陰影 影。4.css邊框 為邊框應用 border image url borderim...

css3屬性 border radius用法

1 doctype html 2 html 3 head 4 meta charset utf 8 5 style 6div 1314 div1 1920 div2 25style 26head 2728 body 2930 div class div1 border radius 屬性允許您向元素...

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...