[分享]css3所有缩写属性

在CSS3中，有许多缩写属性能够让你更加方便地书写CSS代码。下面我们来一一了解这些缩写属性：

/* font缩写 */ 
font: font-style font-variant font-weight font-size/line-height font-family;

/* background缩写 */
background: background-color background-image background-repeat background-attachment background-position;

/* border缩写 */
border: border-width border-style border-color;

/* padding缩写 */
padding: padding-top padding-right padding-bottom padding-left;

/* margin 缩写 */
margin: margin-top margin-right margin-bottom margin-left;

/* flex缩写 */
flex: flex-grow flex-shrink flex-basis;

/* grid-template 缩写 */
grid-template: grid-template-rows / grid-template-columns;

/* grid-row 缩写 */
grid-row: grid-row-start / grid-row-end;

/* grid-column 缩写 */
grid-column: grid-column-start / grid-column-end;

/* grid-area 缩写 */
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

/* transition缩写 */
transition: transition-property transition-duration transition-timing-function transition-delay;

/* animation缩写 */
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

/* box-shadow缩写 */
box-shadow: inset x-offset y-offset blur spread color;

/* text-shadow缩写 */
text-shadow: x-offset y-offset blur color;

/* column-count缩写 */
column-count: column-width column-gap;

/* column-rule缩写 */
column-rule: column-rule-width column-rule-style column-rule-color;

/* transform缩写 */
transform: translate() rotate() scale() skew() matrix(); 

以上就是CSS3中的所有缩写属性啦！掌握它们，能够让我们更加高效地书写CSS代码。