1、透明度
rgba和opacity都可以設置透明的。
rgba(red, green, blue, alpha):alpha是0-1透明度,0時顏色為完全透明,1是完全不透明。
opacity:index:index是0-1,設置整個元素的透明度。
兩者區別:rgba是設置元素的字體或背景顏色加了透明度,其他樣式不受影響,opacity是影響整個元素包含其子元素都會設置透明度。
2、圓角
border-radius:為元素添加圓角邊框,border-radius可以簡寫也可以分別設置。與margin設置類似,可以設置一個值(表示四個圓角)、兩個值(第一個是左上角右下角,第二個值是右上角左下角)、三個值(第一個值是左上角,第二個值是右上角和左下角,第三個值是右下角)。
border-radius: 10px;
/* 等價于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
3、背景圖片
新增背景圖片設置可以簡寫,也可以分開單獨設置。新增屬性及意義:
- background-image /*設置背景圖路徑(相對和絕對路徑)*/
- background-repeat /*背景圖是否重復,repeat-x水平方向重復;repeat-y垂直方向重復;no-repeat不重復;默認情況下兩個方向都重復*/
- background-position /*背景圖對齊方式,默認是左上角;(100% 0)right top設置到右上角;(100% 100%)right bottom設置到右下角;(0 100%)left bottom設置到左下角;0 0(left top)設置到左上角;center center 水平和垂直方向都居中 */
- background-attachment /*背景圖是固定還是滾動。fixed固定背景圖;scroll跟隨頁面滾動*/
- background-size 背景圖片的尺寸。
- backgroun-origin 規定background-position屬性相對于什么位置來定位。
- background-clip 規定背景的繪制區域。
4、陰影
box-shadow:給元素添加陰影。
語法:box-shadow:水平偏移 垂直偏移 [ 模糊半徑 陰影尺寸 陰影顏色 inset(內部陰影) ]
text-shadow:給文字加陰影。
語法:text-shadow:水平偏移 垂直偏移 [ 模糊半徑 陰影尺寸 陰影顏色 inset(內部陰影) ]
5、漸變
漸變有兩種:線性漸變和徑向漸變。
線性漸變:從某個方向或角度開始定義漸變
線性漸變語法(使用方向):background-image: linear-gradient(direction, color-stop1, color-stop2, …);
direction不設置的時候默認從上到下,可以設置的方向屬性值有to bottom、to top、to right、to left、to bottom right。
線性漸變語法(使用角度):background-image: linear-gradient(angle, color-stop1, color-stop2, …);
angle角度設置時 數字加deg。
徑向漸變:從中心開始定義漸變
徑向漸變語法:background-image: radial-gradient(shape size at position, start-color, …, last-color);
6、轉換
css3的轉換可以對元素進行伸縮、縮放、旋轉、移動等。轉換可分為2D轉換和3D轉換。
2D轉換有scale(縮放)、rotate(旋轉)、translate(移動)、skew(沿x或y軸旋轉)、matrix簡寫各種2D轉換。
- translate(x,y):指定元素在二維空間中的位移。X軸方向向右,Y軸方向向下。
- translateX(n):指定元素在X軸中的位移。
- translateY(n):指定元素在Y軸中的位移。
- scaleX(n):定義 X 軸方向的縮放轉換。
- scaleY(n):定義 Y 軸方向的縮放轉換
- skew(x-angle,y-angle):定義沿著 X 和 Y 軸的 2D 傾斜轉換。
- skewX(angle):定義沿著 X 軸的 2D 傾斜轉換。
- skewY(angle):定義沿著 Y 軸的 2D 傾斜轉換。
matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。
實例: 利用matrix()方法旋轉div元素30°
transform : matrix( 0.866 , 0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
3D轉換
3D轉換
- translated3d(x,y,z):指定元素在三維空間的位移。
- translatedX(x) :指定元素在x軸中的位移。
- translatedY(y) :指定元素在y軸中的位移。
- translatedZ(z) :指定元素在z軸中的位移。
- scale3d(x,y,z):定義 3D 縮放轉換。
- scaleX(x):通過設置 X 軸的值來定義縮放轉換。
- scaleY(y):通過設置 Y 軸的值來定義縮放轉換。
- scaleZ(z):通過設置 Z 軸的值來定義縮放轉換。
- rotate3d(x,y,z,angle):定義 3D 旋轉。
- rotateX(x):定義沿著 X 軸的 3D 旋轉。
- rotateY(y):定義沿著 Y 軸的 3D 旋轉。
- rotateZ(z):定義沿著 Z 軸的 3D 旋轉。
7、過渡
transition :設置元素要過渡的效果,總共有四個屬性,可簡寫。
- transition-property:規定應用過渡的 CSS 屬性的名稱。
- transition-duration:定義過渡效果花費的時間。默認是 0。
- transition-timing-function :規定過渡效果的時間曲線。默認是 “ease”。
- transition-delay:規定過渡效果何時開始。默認是 0。
可簡寫為:
transition: property duration timing-function delay;
8、動畫
animate:為元素添加動畫,是一個簡寫屬性。也可以拆分設置。
- animation-name:規定動畫名稱
- animation-duration:規定一個動畫周期所花費的時長ms或s為單位。
- animation-timing-function:規定動畫的速度曲線。
- animation-fill-mode:規定動畫不播放時的元素樣式。
- animation-delay:規定動畫延遲多久執行。
- animation-iteration-count:動畫播放次數。
- animation-direction:規定動畫下一期是否逆向播放。
- animation-paly-state:動畫運行狀態。
可簡寫為:
animation: name duration timing-function delay iteration-count paly-state;
9、文本效果
word-break:定義如何換行。屬性值有normal(瀏覽器默認換行規則)、break-all(允許在單詞內換行)、keep-all(只能在半角空格或連字符處換行)。
word-wrap:允許長的內容可以自動換行。屬性值有normal,break-word。
text-overflow :指定文本溢出包含他的元素,應該發生什么。屬性值有clip(修剪文本)、ellipsis(顯示省略號)、string(給定的字符串來代表被修剪的文本)。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。