柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3 都有哪些新屬性

http://yzkb.51969.com/

1. css3 都有哪些新屬性

1.1. 圓角邊框 (border-radius)1.2. 盒子陰影 (box-shadow)1.3. 文本陰影 (text-shadow)1.4. 響應(yīng)式設(shè)計(jì)相關(guān)屬性1.5. 漸變背景 (gradient backgrounds)1.6. 透明度 (opacity 和 rgba/hsla)1.7. 多列布局 (column-count, column-gap, etc.)1.8. 變換 (transform)1.9. 過渡 (transition)1.10. 動(dòng)畫 (@keyframes + animation)1.11. font-face屬性 2. css3 有哪些響應(yīng)式設(shè)計(jì)相關(guān)屬性

2.1. Media Queries (@media)2.2. Flexbox (display: flex)2.3. Grid Layout (display: grid)2.4. Viewport Units (vw, vh, vmin, vmax)2.5. ** calc()**2.6. rem單位 3. css3 媒體查詢

3.1. 基本語法3.2. 常用媒體特性3.3. 示例3.4. 注意事項(xiàng) 4. css3 多列布局5. css3 動(dòng)畫

5.1. 構(gòu)成

5.1.1. @keyframes規(guī)則:5.1.2. animation-name:5.1.3. animation-duration:5.1.4. animation-timing-function:5.1.5. animation-iteration-count:

1. css3 都有哪些新屬性

CSS3引入了許多新屬性，極大地豐富了網(wǎng)頁(yè)設(shè)計(jì)的能力，提高了用戶體驗(yàn)。

以下是一些關(guān)鍵的CSS3新屬性及其簡(jiǎn)要說明：

1.1. 圓角邊框 (border-radius)

使元素的邊框變?yōu)閳A角。例如，border-radius: 10px; 將元素的四個(gè)角都設(shè)置為10像素的圓角。

1.2. 盒子陰影 (box-shadow)

給元素添加陰影效果，增加深度和維度。例如，box-shadow: 5px 5px 10px #888888; 表示陰影偏移5像素右和下，模糊距離為10像素，顏色為灰色。

1.3. 文本陰影 (text-shadow)

給文本添加陰影，可用于創(chuàng)建立體或發(fā)光效果。

例如，text-shadow: 2px 2px 4px #000000; 會(huì)使文本產(chǎn)生向右下方偏移2像素，模糊4像素的黑色陰影。

1.4. 響應(yīng)式設(shè)計(jì)相關(guān)屬性

flexbox (flex布局)：如 display: flex; 用于創(chuàng)建靈活且可響應(yīng)的布局。grid (網(wǎng)格布局)：如 display: grid; 提供了一種定義二維布局的方法。media queries：如 @media screen and (max-width: 600px) {...} 可根據(jù)不同屏幕尺寸應(yīng)用不同樣式。

1.5. 漸變背景 (gradient backgrounds)

使用 linear-gradient() 或 radial-gradient() 創(chuàng)建線性或徑向漸變背景。例如，background: linear-gradient(to right, red, orange); 創(chuàng)建從左到右紅色漸變至橙色的背景。

1.6. 透明度 (opacity 和 rgba/hsla)

opacity: 0.5; 控制元素的整體透明度。background-color: rgba(0, 0, 0, 0.5); 使用RGBA顏色模式設(shè)置帶有透明度的背景顏色。

1.7. 多列布局 (column-count, column-gap, etc.)

用于實(shí)現(xiàn)文本的多列布局，如 column-count: 3; 將內(nèi)容分為三列顯示。

1.8. 變換 (transform)

用于旋轉(zhuǎn)、縮放、傾斜或移動(dòng)元素。例如，transform: rotate(45deg); 旋轉(zhuǎn)元素45度。

1.9. 過渡 (transition)

添加平滑的動(dòng)畫效果到CSS屬性的變化，如 transition: background-color 0.5s ease; 在背景顏色變化時(shí)添加0.5秒的過渡效果。

1.10. 動(dòng)畫 (@keyframes + animation)

創(chuàng)建復(fù)雜的動(dòng)畫序列，如 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 定義了一個(gè)淡入動(dòng)畫，然后通過 animation: fadeIn 2s; 應(yīng)用到元素上。

1.11. font-face屬性

font-face屬性：定義自己的字體。

在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

這些只是CSS3眾多新功能的一部分，還有更多屬性如 border-image, calc() 函數(shù)，以及針對(duì)字體(@font-face)、濾鏡效果 (filter) 等的改進(jìn)，大大增強(qiáng)了CSS的功能性和表現(xiàn)力。

更多詳細(xì)內(nèi)容，請(qǐng)微信搜索“前端愛好者“， 戳我 查看 。

2. css3 有哪些響應(yīng)式設(shè)計(jì)相關(guān)屬性

CSS3 引入了多項(xiàng)特性來支持響應(yīng)式設(shè)計(jì)，使得網(wǎng)頁(yè)能夠根據(jù)不同的設(shè)備特性和屏幕尺寸自動(dòng)調(diào)整布局和樣式。

以下是幾個(gè)關(guān)鍵的響應(yīng)式設(shè)計(jì)相關(guān)屬性及其示例：

2.1. Media Queries (@media)

Media Queries 是響應(yīng)式設(shè)計(jì)的核心，它允許你根據(jù)不同的條件應(yīng)用不同的CSS規(guī)則。

例如，你可以基于屏幕寬度調(diào)整布局：

@media screen and (max-width: 600px) {

/* 當(dāng)屏幕寬度小于或等于600px時(shí)的樣式 */

.content {

width: 100%;

padding: 0 10px;

}

}

2.2. Flexbox (display: flex)

Flexbox（彈性盒子模型）提供了一種更加有效的方式來布局、對(duì)齊和分配容器內(nèi)項(xiàng)目的空間，不論它們的大小如何：

.container {

display: flex;

flex-wrap: wrap;

}

.item {

flex: 1 0 200px; /* 使項(xiàng)目能夠伸縮并設(shè)定最小寬度 */

}

2.3. Grid Layout (display: grid)

網(wǎng)格布局提供了創(chuàng)建二維布局結(jié)構(gòu)的能力，非常適合響應(yīng)式設(shè)計(jì)中的復(fù)雜布局：

.grid-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}

2.4. Viewport Units (vw, vh, vmin, vmax)

視口單位讓你能夠基于視口尺寸來設(shè)定元素的尺寸，而不是固定的像素值：

.header {

font-size: 3vw; /* 文字大小會(huì)隨視口寬度變化 */

}

2.5. ** calc()**

calc() 函數(shù)可以在CSS中執(zhí)行計(jì)算，幫助創(chuàng)建動(dòng)態(tài)的布局和響應(yīng)式的尺寸：

.element {

width: calc(100% - 60px); /* 元素寬度為視口寬度減去60像素 */

}

2.6. rem單位

使用 rem（根元素的em）作為單位，可以使元素尺寸相對(duì)于頁(yè)面根字體大小縮放，便于在不同屏幕尺寸上調(diào)整布局：

html {

font-size: 16px;

}

.section {

width: 30rem; /* 寬度為根字體大小的30倍 */

}

這些屬性和功能結(jié)合使用，構(gòu)成了CSS3響應(yīng)式設(shè)計(jì)的基礎(chǔ)，使開發(fā)者能夠創(chuàng)建出適應(yīng)各種設(shè)備和屏幕尺寸的靈活網(wǎng)頁(yè)布局。

3. css3 媒體查詢

CSS3中的媒體查詢（Media Queries）是一種強(qiáng)大的技術(shù)，它允許開發(fā)者根據(jù)不同的設(shè)備特征（如視口尺寸、設(shè)備像素比、設(shè)備方向等）來應(yīng)用不同的CSS樣式。

這對(duì)于創(chuàng)建響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要，確保網(wǎng)站在多種設(shè)備上，無論是桌面、平板、手機(jī)還是其他屏幕類型，都能提供良好的用戶體驗(yàn)。下面是關(guān)于CSS3媒體查詢的一些基本概念和用法指南：

3.1. 基本語法

媒體查詢的基本結(jié)構(gòu)使用@media規(guī)則，后跟一個(gè)或多個(gè)媒體特性（可選的媒體類型和媒體特性值），以及大括號(hào)內(nèi)的CSS樣式聲明。

@media media-type and (media-feature: value) {

/* CSS rules */

}

media-type 是可選的，指定了目標(biāo)設(shè)備類型，如 screen、print、speech 等，現(xiàn)代Web開發(fā)中通常省略，因?yàn)榇蠖鄶?shù)情況下都是針對(duì)屏幕。media-feature 是媒體特征，例如 width、height、orientation、resolution 等。value 是與媒體特征相關(guān)的具體值或者范圍。

3.2. 常用媒體特性

min-width 和 max-width: 設(shè)定樣式應(yīng)用于最小/最大寬度以上的屏幕。min-height 和 max-height: 同上，但針對(duì)高度。orientation: 檢測(cè)設(shè)備是橫屏(landscape)還是豎屏(portrait)。resolution: 設(shè)備的分辨率，可以是dpi、dpcm或dppx單位。color 和 color-index: 針對(duì)設(shè)備的顏色能力。

3.3. 示例

/* 針對(duì)屏幕寬度至少為600px的設(shè)備 */

@media (min-width: 600px) {

body {

font-size: 18px;

}

}

/* 針對(duì)橫屏設(shè)備 */

@media (orientation: landscape) {

.sidebar {

width: 30%;

}

}

/* 針對(duì)高分辨率屏幕 */

@media (min-resolution: 2dppx) {

.logo {

background-image: url(high-res-logo.png);

}

}

3.4. 注意事項(xiàng)

媒體查詢可以嵌套，以實(shí)現(xiàn)更復(fù)雜的邏輯。使用 and、,、not、only 這些關(guān)鍵字來組合和限制查詢條件。通常在樣式表的底部放置媒體查詢，以確保它們能覆蓋之前定義的樣式（遵循CSS的層疊原則）。確保設(shè)置

通過合理運(yùn)用媒體查詢，開發(fā)者能夠創(chuàng)建靈活且適應(yīng)性強(qiáng)的界面，滿足多樣化的用戶需求。

4. css3 多列布局

CSS3的多列布局允許開發(fā)者輕松地將文本或者其他內(nèi)容分割成多個(gè)列，類似于報(bào)紙的排版效果，提高內(nèi)容的可讀性和頁(yè)面的美觀性。

下面是一個(gè)使用CSS3多列布局屬性的簡(jiǎn)單示例：

假設(shè)我們想在一個(gè)

Flipkart印度優(yōu)選家