初探css3

属性选择器：
　　1.完全匹配的属性选择器。 就是完全匹配的字符串。

　[id=article]{ 
　　　　　　color:red;
　　　　}

　　2.包含匹配选择器。包含有指定的字符串。
　　　　语法是：[attribute*=value] attribute 指的属性名，value 指的是属性值， 包含采用“*=”符号。

　[id*=article]{ 
　　　　　　　　　　color:red;
　　　　　　}

　　3.首字符匹配选择器。只要开头字符符合匹配。
　　　　语法是：[attribute^=value] attribute 指的属性名，value 指的是属性值， 包含采用“^=”符号。

　　　[id^=article]{ 
　　　　　　　　　　color:red;
　　　　　　}

　　4.尾字符匹配选择器。 只要匹配结尾的字符串。
　　　　语法是：[attribute$=value] attribute 指的属性名，value 指的是属性值， 包含采用“$=”符号。

　　　　　　[id$=article]{ 
　　　　　　　　　　color:red; 
　　　　　　}

伪类选择器：
　　1.before 伪类元素选择器，主要作用是在选择某个元素之前插入内容。
　　　　语法：元素标签:before{
　　　　　　　　content:"插入的内容"
　　　　　　　}

　p.before{ 
　　　　　　content:"文字"
　　　　}

　　2.after 伪类元素选择器，主要作用是在选择某个元素之后插入内容。
　　　　　　语法：元素标签:after{
　　　　　　　　　　content:"插入的内容"
　　　　　　}

　　　　p.after{ 
　　　　　　　　content:"文字"
　　　　　　}

　　3.first-child 指定元素列表中第一个元素的样式。

　　　li:first-child{ 
　　　　　　　　color:red;
　　　　}

　　4.last-child 指定元素列表中第一个元素的样式。

　li:last-child{ 
　　　　　　　　color:red;
　　　　}

　　5.nth-child 和 nth-last-child 可以指定某个元素的样式或从后数起某个元素的样式。
　　　　//指定第2个li元素
　　　　　　li:nth-child(2){}
　　　　//指定倒数第2个li元素
　　　　　　li:nth-last-child{}
　　　　//指定偶数个li元素
　　　　　　li:nth-child(even){}
　　　　//指定基数个li元素
　　　　　　li:nth-child(odd){}

阴影
　　1.box-shadow 让元素具有阴影效果。
　　　　语法： box-shadow:<length><length><length>|| color;
　　　　　　第一个 length 是阴影水平偏移值；
　　　　　　第二个 length 是阴影垂直偏移值；
　　　　　　第三个 length 是阴影模糊偏移值；
　　水平和垂直 值可负。
　　div{
　　　　/*其他浏览器*/
　　　　　　box-shadow:3px 4px 2px #000;
　　　　/*webkit 浏览器*/
　　　　　　-webkit-box-shadow:3px 4px 2px #000；
　　　　/*firefox*/
　　　　　　-moz-box-shadow:3px 4px 2px #000；
　　　　}
　　2.text-shadow 设置文本内容的阴影效果或模糊效果。
　　　　　　语法：同box-shadow 相同。

背景
　　1.background-size 用于设置背景图片的大小。
　　　　语法：background-size:10px 5px;
　　　　　　　　-webkit-background-size:10px 5px;
　　2.background-clip 用于确定背景的裁剪区域。
　　3.backrground-origin 用于指定background-position 属性的参考坐标起始位置。
　　　　border 边框的左上角开始， content 内容区域 的左上角开始 padding 从padding区域开始。
　　4.background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000)); 背景渐变

圆角边框
　　border-radius：
　　border-radius:10px 5px;
　　-moz-border-radius:10px 5px;
　　-webkit-border-radius:10px 5px;
　　或
　　border-radius:10px 5px 10px 5px;
　　-moz-border-radius:10px 5px 10px 5px;
　　-webkit-border-radius:10px 5px 10px 5px;
　　viewport 虚拟窗口
　　<meta name="viewport" content="width=device-width,initial-seale=1,user-scalable=0"/>
　　参数：
　　　　width 指定虚拟窗口的屏幕宽度大小。
　　　　height 指定虚拟窗口的屏幕高度大小。
　　　　initial-scale 指定初始缩放比例
　　　　maximum-scale 指定允许用户缩放的最大比例
　　　　minimum-scale 指定允许用户缩放的最小比例
　　　　user-scalable 指定是否允许手动缩放。
　　　　<link rel="stylesheet" media="screen and(min-600px) and(max-900px)" href="样式地址"/>
　　　　　　　　当屏幕宽度位于 600~900 时调用这个参数。
　　在竖屏模式下
　　<link rel="stylesheet" media="all and(orientation:portration)" href="样式地址"/>
　　在横屏模式下
　　<link rel="stylesheet" media="all and(orientation:landscape)" href="样式地址"/>
　　@media only screen and (min-213px) {}
　　　　only 移动浏览器会自动忽略，
　　　　不支持的浏览器会自动忽略这个样式。

Geolocation 地理定位。
　　navigator.geolocation.getCurrentPosition(function(pos){
　　　　console.log("当前地理位置的纬度"+pos.coords.latitude);
　　　　console.log("当前地理位置的经度"+pos.coords.longitude);
　　　　console.log("当前纬度的精度"+pos.coords.accuracy);
　　})