大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏,欢迎大家留言。
新属性
下面是 CSS3 新增的 CSS3 属性列表。
animation
(and eight )background-clip
background-origin
background-size
border-radius
(and four )border-image
(and six )box-decoration-break
box-shadow
box-sizing
columns
(and thirteen )clear-after
flex
(and eleven )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 )text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition
(and four )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 lengthscalc()
units for lengthstoggle()
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 没有包含的特性。
@font-face
- Media Queries
- Keyframe animations using
@keyframes
- Conditional styles using
@supports
- Namespacing using
@namespace
- Regions
- Filters
仍在变化中的特性
上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。
- New features in
- New features in
- New features in
- New
- New features in
- The for
@font-face
- New features in
您可能感兴趣的相关文章
本文链接:
编译来源: