css3 新特性

目录

1. border-radius
2. box-shadow
3. text-shadow
4. gradients
   • linear-gradient
   • radial-gradient
5. transition
6. animation
7. multi-columns
8. flex-box
9. 栅格布局

border-radius

border-radius: 30px

box-shadow

box-shadow: 60px -16px teal;

text-shadow

text-shadow: -11px -11px black;

gradients

 background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); 

 background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%;

transition

 transition: <property> <duration> <timing-function> <delay>;

  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;

animation

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

multi-columns

<div id="col">
  <p>......</P>
</div>

col {
  /* column-count: 2;
  column-width: 100px; */
  columns: 2 100px; 
  column-gap: 2em;
}

参考：

• MDN:multi_column_layouts

flex-box

• 容器属性
  1. flex-decoration
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content
• 项目属性
  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basic 设置main size
  5. flex (flex-grow flex-shrink flex-basic)
  6. align-self

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

参考：

• MDN:flexBox
• 阮一峰:flex
• flex演示

栅格布局

• 阮一峰：Grid

flex 布局教程

阮一峰：flex布局教程