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