CSS3 学习及知识点总结 以便后续深入研究

css3

1. 今天接触的第一个属性是border-radius，其属性值设置为一个时择每个角都是该圆角值，俩个值时 分别为左上 右下；右上 左下。 三个值 ：左上； 右上，左下；右下。

2. 对浏览器兼容问题在其属性前加相关前缀： 火狐 -moz- ; 谷歌，苹果 -webkit-; 欧朋-o-;IE-ms-

3. border-shadow:x轴坐标 y轴坐标 模糊度 阴影大小 颜色 （inset “内阴影”） ； 加“ ,”可设置多个阴影

4. 属性选择器
   E[attr]选中属性 ；
   E[attr=value]选中属性及名字 ；
   E[attr^=value]选择以value开始命名的相关元素；
   E[attr$=value]选择以value内容结束的相关元素；
   E[attr*=value]选中比许包含value的元素；

5. 结构选择器
   确定自己选择的标签元素，选择对象为同等层级
   x:first/last-child 选择（第一个/最后一个）必须为x元素的子元素
   x:nth-child(数字 even odd *n） 选择位序符合其条件的x元素
   x:nth-last-child() 从后面数第n个x元素

   	x:first-of-type
   	x:last-of-type
   	x:nth-of-type   完全根据x元素排序，其他干扰元素无效         
   

6. 背景图片的放置
   background-size:cover; 原图按原比例铺满，但是不考虑适应性
   background-size:contain; 保持原比例不变适应其容器铺满
   “多用于移动端”

   background-origin:border-box; 从边框下放置
   background-origin:centent-box;从内容下放置

   背景剪裁：
   background-clip:border-box;

   背景渐变
   background:linear-gradient(,);
   background:repeating-linear-gradient(,);
   径向渐变
   background:radial-gradient(,);