CSS3+新屬性有哪些

這篇文章主要介紹“CSS3+新屬性有哪些”，在日常操作中，相信很多人在CSS3+新屬性有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”CSS3+新屬性有哪些”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

新屬性

下面是 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 新增的取值，下面是每個(gè)屬性新值的列表。

• Value “l(fā)ocal” 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

仍在變化中的特性

上面的列表并不詳盡，還有很多仍然在發(fā)展中的規(guī)范，并沒有太多的瀏覽器支持，下面是這些新模塊的列表。

• 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

到此，關(guān)于“CSS3+新屬性有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！