码迷,mamicode.com
首页 > Web开发 > 详细

css3 新特性

时间:2019-05-10 16:19:31      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:nts   dev   strong   size   zh-cn   content   item   width   log   

目录

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

参考:

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

参考:

栅格布局

flex 布局教程

阮一峰:flex布局教程

css3 新特性

标签:nts   dev   strong   size   zh-cn   content   item   width   log   

原文地址:https://www.cnblogs.com/rosendolu/p/10844874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!