CSS3+新属性有哪些

这篇文章主要介绍“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 没有包含的特性。

• @font-face

• Media Queries

• Keyframe animations using @keyframes

• Conditional styles using @supports

• Namespacing using @namespace

• Regions

• Filters

仍在变化中的特性

上面的列表并不详尽，还有很多仍然在发展中的规范，并没有太多的浏览器支持，下面是这些新模块的列表。

• Counter Styles Level 3

• Device  Adaptation

• Display  Module Level 3

• Line Grid

• Mobile Text  Size Adjustment

• CSS  Variables

• Box  Alignment

• The "all" property

• Exclusions  and Shapes

• Generated Content  for Paged Media

• Grid  Layout

• Grid Template  Layout

• Line Layout  Module

• New features in Lists and Counters

• Overflow  Module

• New features in Paged Media

• New features in CSS Sizing

• Media Queries  Level 4

• Selectors Level  4

• ch  units

• Viewport relative lengths

• New resolution units

• Compositing and Blending

• New features in CSS speech

• The unicode-range descriptor for @font-face

• New features in CSS Images and Replaced Content

• CSS Masking

到此，关于“CSS3+新属性有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！