HTML CSS 笔记

1、img{background-size:contain;}

       background-size的contain特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域。可能会留白

2、img{ background-size:cover; }

  background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。超出隐藏

3、缩放和浏览器兼容 transform:scale(2,2.5);

scale(x,y) 对元素进行缩放

 

• X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

• Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

  -webkit-transform:scaleY(.5); /* Safari 和 Chrome */

   -moz-transform:scaleY(.5); /* Firefox */

   -ms-transform:scaleY(.5); /* Internet Explorer */

   -o-transform:scaleY(.5); /* Opera */  

4、旋转 transform:rotate(45deg)

     transform:rotate(45deg)  旋转45度

     transform:rotate3d(1，1,0,45deg); 如果你要沿着该轴转动那就将该轴的值设置为1，否则为0；然后在后面的angle中设置旋转的角度，