css3学习手记

完全匹配属性选择器：[id=value]

包含匹配选择器：[id*=value]

首字符匹配选择器：[id^=value]

尾字符匹配选择器：[id$=value]

阴影：box-shadow:3px  2px 1px #000  /*其他浏览器*/       

            -webkit-box-shadow:3px  2px 1px #000  /*webkit浏览器*/

           -moz-box-shadow:3px  2px 1px #000  /*firefox浏览器*/

            text-shadow和box-shadow差不多

背景：backgroud-size  设置背景图像大小    backgroud-size：10px 5px ;     -webkit-backgroud-size:10px 5px;

          backgroud-clip  确定背景的剪裁区域   

          渐变 background：-webkit-gradient(linear/radial,0 0,0 100%,from(#fff) ,to(#000) );   

                                                                       线性渐变/径向渐变

圆角边框： border-radius:10px 5px;

                    -webkit-border-radius:10px 5px;

                     -moz-border-radius:10px 5px;

使用viewport设置适应移动设备屏幕大小

<meta  name="viewport" content="width=device-width,inital-scale=1,user-scalable=0" />

属性有：width:指定虚拟窗口的屏幕宽度大小

              height:虚拟窗口屏幕高度

              inital-scale:初始缩放比例

              maximum-scale:允许用户缩放的最大比例

              minimum-scale:允许用户缩放的最小比例

             user-scalable:是否允许手动缩放

使用media queries

当前屏幕可视区域的宽度最大值为600px时

<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" />

small.css:

@media screen and(max-width:600px){

demo{

   background:#000;

  }

}

屏幕可视区域的长度在600px到900px之间时

 media="screen and(min-width:600px) and (max-width:900px)"

当手机最大屏幕可视区域是480px时

media="screen and(max-device-width:480px)"

当移动设备处于纵向模式下时

media="all and(orientation:portrait)"

当移动设备处于横向模式下时

media="all and(orientation:landscape)"

转载于:https://www.cnblogs.com/histoo/archive/2012/11/13/2768612.html