css3 新特性

Posted 2021-11-28 rosendolu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 新特性相关的知识，希望对你有一定的参考价值。

border-radius
box-shadow
text-shadow
gradients
- linear-gradient
- radial-gradient
transition
animation
multi-columns
flex-box
栅格布局

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;
}

参考：

栅格布局

阮一峰：Grid

flex 布局教程

阮一峰：flex布局教程

以上是关于css3 新特性的主要内容，如果未能解决你的问题，请参考以下文章