css3特性彙總

2021-07-14 11:43:10 字數 1926 閱讀 3802

設定圓角:

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */ 

設定陰影:

box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
具體每乙個引數如下所示:

線性漸變背景:

background-image:linear-gradient(to top,red,yellow);
第乙個引數是指漸變的方向。to top:從下到上;to top left:右下角到左下角。

球形漸變:radial-gradient(),引數配置比較複雜,這裡就先不介紹。

單行文字溢位顯示省略號:

text-overflow:ellipsis; /* ellipsis表示顯示省略標記,clip表示剪下  */

overflow:hidden;

white-space:nowrap; /* 強制文字在一行內顯示 */

結構性偽類選擇器:not可以選擇除某個元素外的所有元素。

:empty 選擇器用來選擇沒有任何內容的元素,這裡沒有內容指的是一點內容都沒有,哪怕是乙個空格。(去除空格很有用的!!!!!)

:first-of-type 選擇器用來定位乙個父元素下的某個型別的第乙個子元素。

:nth-of-type(n)選擇器用來定位乙個父元素下的某個型別的第n個子元素。

:enabled選擇器是對可用的表單設定樣式。

:disabled選擇器是對不可用的表單設定樣式。

:checked 定義選中狀態的表單的樣式。

:read-only定義了處於唯讀狀態元素的樣式。對應的:read-write定義了元素處於非唯讀狀態時的樣式。

下面是關於css3的變形的一些屬性。

transform:rotate()是指定元素旋轉的幅度,單位是deg,正數代表順時針旋轉。rotate只會旋轉不會改變元素的形狀.

transform:skew(x,y)是將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。

transform:scale(x,y)使元素水平方向和垂直方向同時縮放。

transform:translate(x,y)將元素向指定的方向移動,不影響任何其他web元件。translate還可用於不知道寬高的元素水平垂直居中。具體如下:

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

其中translate(-50%,-50%)的百分比是根據自身的寬度和高度來決定的.

transform-origin:top left;是指將元素的原點重置到左上角.css的變形進行的旋轉、位移、縮放、扭曲等操作都是以元素自己中心位置來變形。

下面是關於過渡屬性transition的介紹。

transition-property:指定過渡或動態模擬的css屬性。

transition-duration:指定完成過渡所需的時間。

transition-timing-function:指定過渡的緩動函式,主要包括以下幾種函式。

transition-delay:指定開始出現的延遲時間。

下面介紹css動畫:

@keyframes 後面緊跟著動畫名稱加上{},括號中就是一些不同時間段樣式規則。

呼叫動畫使用animation。具體引數上w3c查詢。

常用CSS3特性

box shadow 盒子陰影 x軸,y軸,模糊距離,陰影半徑拓展,陰影顏色,inset 內投影 可以分別設定四邊,效能殺手 text shadow 字型陰影 x軸,y軸,模糊距離,陰影顏色 rgba rgba和opacity區別,只會對當前元素生效 語法 background linear gra...

css3新增特性

css3屬性選擇器 media all screen print speech only and not min width max width orientation portrait landscape e attr value id value class value e attr value...

CSS3有哪些新特性?CSS3新特性詳解

本篇文章給大家帶來的內容是關於css3有哪些新特性?css3新特性詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...