更改背景图片颜色

  1. /*  .gray {  
  2.     filter: grayscale(100%);
  3.     filter: gray;
  4.     opacity:0.7;
  5.     } */

布局

三栏布局-flex布局

  1. <div class="container">
  2.   <div class="main">main</div>
  3.   <div class="left">left</div>
  4.   <div class ="right">right</div>
  5. </div>
  6. <style>
  7. .container {
  8.   width:100%;
  9.   mine-height:300px;
  10.   display:flex;
  11. }
  12. .main {
  13.   background:#ddd;
  14.   flex-grow:1;
  15. }
  16. .left {
  17.   background:#eee;
  18.   order:-1;
  19.   flex-basis:60px;
  20. }
  21. .right {
  22.   background:#f00;
  23.   flex-basis:60px;
  24. }
  25. </style>

语法

阴影

  1. 文字阴影 text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
  2. 盒阴影：box-shadow: 10px 10px 5px #888888
  3. 边框图片：border-image: url(border.png) 30 30 round
  4. word-wrap（对长的不可分割单词换行）word-wrap：break-word

CSS 动画

  1. transition
  1. // 语法
  2. transition: property duration timing-function delay;

image.png

使用css3 使得背景图片呈现动态效果

  1. @keyframes mlfly {
  2.       0% {
  3.         background: url(./image/mainbg.png) no-repeat 0 0 / 100% 100%;
  4.         background-position: 0 0;
  5.       }
  6.       100% {
  7.         background: url(./image/mainbg.png) no-repeat 0 0 / 100% 100%;
  8.         background-position: 1080px 0;
  9.       }
  10.     }
  11.     -webkit-transform-style: preserve-3d;
  12.     transform-style: preserve-3d;
  13.     animation: mlfly 1s steps(3, start) 1s infinite alternate;