css3新增屬性有哪些-前端問答-PHP中文網

首頁

web前端

前端問答

css3新增屬性有哪些

青灯夜游

Apr 02, 2021 pm 04:50 PM

css3

css3新增屬性有：word-wrap、word-break、text-shadow、border-radius、box-shadow、border-image、background-size、transform、transition等。

css3新增屬性有哪些

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

css3新增屬性

#1、CSS3文字效果：

hanging-punctuation：規定標點字元是否位於線框外。
punctuation-trim：規定是否要修剪標點字元。
text-align-last：設定如何對齊最後一行或緊鄰強制換行符之前的行。
text-emphasis：向元素的文字應用重點標記以及重點標記的前景色。
text-justify：規定當 text-align 設定為 "justify" 時所使用的對齊方法。
text-outline：規定文字的輪廓。
text-overflow：規定當文字溢出包含元素時發生的事情。
text-shadow：在文字上新增陰影。
text-wrap：規定文字的換行規則。
word-break：規定非中日韓文本的換行規則。
word-wrap：允許將長的不可分割的單字分割並換行到下一行。

2、CSS3邊框：

#border-radius：CSS3圓角邊框。
box-shadow：用於在方框中新增陰影。
border-image：CSS3邊框圖片，可以使用圖片來建立邊框。

3、CSS3背景：

#background-size：屬性規定背景圖片的尺寸。
background-origin：屬性規定背景圖片的定位區域。
background-clip：規定背景的繪製區域。

（學習影片分享：css影片教學）

4、CSS3 轉換：

transform 向元素套用2D 或3D 轉換。
transform-origin 允許你改變被轉換元素的位置。
transform-style 規定被巢狀元素如何在 3D 空間中顯示。
perspective 規定 3D 元素的透視效果。
perspective-origin 規定 3D 元素的底部位置。
backface-visibility 定義元素在不面對螢幕時是否可見。

5、CSS3 轉換：

#當元素從一種樣式變換為另一種樣式時為元素新增效果。

transition：簡寫屬性，用於在一個屬性中設定四個過渡屬性。
transition-property：規定套用過渡的 CSS 屬性的名稱。
transition-duration：定義過渡效果所花費的時間。預設是 0。
transition-timing-function：規定過渡效果的時間曲線。預設是 "ease"。
transition-delay：規定過渡效果何時開始。預設是 0。

6、CSS3動畫：透過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

@keyframes：規定動畫。
animation：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name：規定 @keyframes 動畫的名稱。
animation-duration：規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function：規定動畫的速度曲線。預設是 "ease"。
animation-delay：規定動畫何時開始。預設是 0。
animation-iteration-count：規定動畫播放的次數。預設是 1。
animation-direction：規定動畫是否在下一週期逆向播放。預設是 "normal"。
animation-play-state：規定動畫是否正在運作或暫停。預設是 "running"。
animation-fill-mode：規定物件動畫時間以外的狀態。

7、CSS3多列：

#column-count：指定元素應該被分割的列數。
column-fill：指定如何填入列
#column-gap：指定列與列之間的間隙
column-rule：所有column-rule-* 屬性的簡寫
column-rule-color：指定兩列間邊框的顏色
column-rule-style：指定兩列間邊框的樣式
#column-rule-width：指定兩列間邊框的厚度
#column-span：指定元素要跨越多少列
#column-width：指定列的寬度
columns：設定column-width 和column-count 的簡寫

8、CSS3使用者介面：

#resize：屬性規定是否可由使用者調整元素尺寸。
box-sizing：屬性可讓您以確切的方式定義適應某個區域的具體內容。
outline-offset：屬性會對輪廓偏移，並在超出邊框邊緣的位置繪製輪廓。
appearance：允許您讓一個元素的外觀像一個標準的使用者介面元素。
icon：為創作者提供了將元素設定為圖示等價物的能力。
nav-down：指定在何處使用箭頭向下導覽鍵時進行導覽。
nav-index：指定一個元素的Tab的順序。
nav-left：指定在何處使用左側的箭頭導覽鍵進行導覽。
nav-right：指定在何處使用右側的箭頭導覽鍵進行導覽。
nav-up：指定在何處使用箭頭向上導覽鍵時進行導覽。

更多程式相關知識，請造訪：程式設計影片！！

以上是css3新增屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

React和前端堆棧：工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫，其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染，優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件，高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當，可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting，保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用：增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件：在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義，封裝UI邏輯並通過props接受輸入數據。 1)定義組件：使用函數或類，返回React元素。 2)渲染組件：React調用render方法或執行函數組件。 3)復用組件：通過props傳遞數據，構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯，提升開發效率和代碼可維護性。