demo0 css宽度 高度 相等

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • .demo0 li{position:relative;width:calc(25% - 10px);height:0;padding:0 0 calc(25% - 10px);}
    .demo0 li div{position:absolute;width:100%;height:100%;}
    
             

    demo1 宽度 百分比和像素

  • width:30%
  • calc(70% - (10px + 5px) * 2)
  • calc(50% - (50px + 10px))
  • calc(50% - (50px + 10px))
  • 75px
  • calc(100vw - 200px)
  • //宽度 百分比和像素
    vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
    .box {
       height: 50px;
       width: 90%;/*写给不支持calc()的浏览器*/
       width:-moz-calc(100% - (10px + 5px) * 2);
       width:-webkit-calc(100% - (10px + 5px) * 2);
       width: calc(100% - (10px + 5px) * 2);
    }
    
             

    demo2 高度 百分比和像素

  • height:100%;
  • calc(100% - 100px);
  • calc(50% - (30px + 10px));
  • calc(100vh - 200px);
  • //高度 百分比和像素
    vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
    .box {
       width: 240px;
       height: calc(100vh - 95px);
    }
    
             

    demo3 英文大写小写

  • text-transform
  • text-transform
  • text-transform
  • text-transform
  • text-transform: uppercase; 全部大写
    text-transform: capitalize; 开头大写
    text-transform: lowercase; 全部小写
    
             

    demo4 css箭头

  • //s实心箭头
    .demo4 li span{display:inline-block;}
    .demo4 li:first-child span,.demo4 li:last-child span{width:0;height:0;border: 10px solid transparent;}
    .demo4 li:first-child span{border-left-color:orange;}
    .demo4 li:last-child span{border-right-color:orange;}
    //空心箭头
    .demo4 li:nth-child(2) span,.demo4 li:nth-child(3) span{width: 20px;height: 20px;border-bottom: 2px solid;}
    .demo4 li:nth-child(2) span{border-right: 2px solid;transform: rotate(-45deg);}
    .demo4 li:nth-child(3) span{border-left: 2px solid;transform: rotate(45deg);}
    
             

    demo5 动画

  • transform-rotate
  • transform-scale
  • transform-translate
  • CSS3中-moz、-ms、-webkit和-o分别代表什么意思  
    1、-moz-:代表FireFox浏览器私有属性
    2、-ms-:代表IE浏览器私有属性
    3、-webkit-:代表safari、chrome浏览器私有属性
    4、-o-:代表opera浏览器私有属性
    
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    
    transform: rotate(360deg);       旋转
    transform: scale(1.2);           放大缩小
    transform: translate(0, -10px);  上下左右移动
    
             

    demo6 阴影

  • Left
  • Top
  • Right
  • Bottom
  • Dark
  • Light
  • Inset
  • Border
  • Light
  • Heavy
  • box-shadow: x-shadow y-shadow blur spread color inset;
    
    x-shadow  必需。 水平阴影的位置。允许负值。
    y-shadow  必需。 垂直阴影的位置。允许负值。
    blur      可选。 模糊距离。
    spread    可选。 阴影的尺寸。
    color     可选。 阴影的颜色。请参阅 CSS 颜色值。
    inset     可选。 将外部阴影 (outset) 改为内部阴影。
    
             

    demo7 渐变

  • Light Linear
  • Dark Linear
  • Light Radial
  • Dark Radial
  • none
  • background-image:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image:radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image:radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    
             

    demo8 圆角

  • 小角
  • 大角
  • 全角
  • 桶角
  • border-radius: 3px;
    border-radius: 8px;
    border-radius: 50%;
    border-radius: 20px/60px;
    
             

    demo9 按钮

  • 一个按钮
  • 一个按钮
  • 一个按钮
  • 一个按钮
  • link:hover
    link:active
    link:visited 
    
             

    demo10 input焦点

  • link:hover
    link:focus