CSS3+新属性有哪些

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“CSS3+新属性有哪些”，在日常操作中，相信很多人在CSS3+新属性有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3+新属性有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

新属性

下面是 CSS3 新增的 CSS3 属性列表。

animation (and eight associated longhand properties)
background-clip
background-origin
background-size
border-radius (and four associated longhand properties)
border-image (and six associated longhand properties)
box-decoration-break
box-shadow
box-sizing
columns (and thirteen associated multi-column properties)
clear-after
flex (and eleven associated flexbox properties)
font-stretch
font-size-adjust
font-synthesis
font-kerning
font-variant-caps
hanging-punctuation
hyphens
icon
image-resolution
image-orientation
line-break
object-fit
object-position
opacity
outline-offset
overflow-wrap / word-wrap
backface-visibility
perspective
perspective-origin
pointer-events (for HTML)
resize
tab-size
text-align-last
text-decoration-line
text-decoration-skip
text-decoration-position
text-decoration-style
text-emphasis (and three associated properties)
text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition (and four associated longhand properties)
word-break
word-spacing
writing-mode

新的值

在 CSS3 中为 CSS2.1 新增的取值，下面是每个属性新值的列表。

Value “local” for the background-attachment property
Value "rgba()" for any property that accepts a color value
Value "hsl()" for any property that accepts a color value
Value "hsla()" for any property that accepts a color value
Value "currentColor" for any property that accepts a color value
Value "inset()" for the clip property
Value "linear-gradient()" for any property that accepts an image value
Value "radial-gradient()" for any property that accepts an image value
Value "repeating-linear-gradient()" for any property that accepts an image value
Value "repeating-radial-gradient()" for any property that accepts an image value
Value "image()" for any property that accepts an image value
Multiple comma-separated images for any property that accepts an image value
Multiple comma-separated background-related values to match multiple background image declarations
Value "center" for the position property
Value "page" for the position property
Value "space" for the background-repeat property
Value "round" for the background-repeat property
15 new values for the cursor property
Values "flex" and "inline-flex" for the display property
Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
Multiple, space-separated values for the letter-spacing property
New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
text-decoration is now a shorthand property
Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
Value "full-width" for the text-transform property
rem units for lengths
calc() units for lengths
toggle() units
Angle units (deg, grad, rad, turn)
Time units (s, ms)

新选择器

下面是 CSS3 中新增的选择器。

Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
:target pseudo-class
New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
:root pseudo-class
New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
The negation pseudo-class :not()
Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
The following-sibling combinator (p ~ img)
::selection pseudo-class (removed from the spec, but everyone uses it)

其它新特性

其它 CSS2.1 没有包含的特性。