CSS3学习总结

1、border-radius:圆角效果
      (1)border-radius:5px 5px 5px 5px ;如果有4个参数,代表4个角
      (2)border-radius:5px 5px;2个参数,代表top-left,bottom-rigt和top-right,bottom-left;
      (2)border-radius:5px 5px 5px;3个参数,代表top-lett和top-right,bottom-left和bottom-right;
2、box-shadow: 添加阴影
            第一个参数是往右偏移: box-shadow:10px 0 0 0 red ;
            第二个参数是往下偏移: box-shadow:0 10px 0 0 red ;
            第三个参数是偏移部位模糊效果,越大越模糊:box-shadow:0 10px 10px 0 red  ;
           (1)background-size: contain; 缩小背景图片使其适应标签元素(主要是像素方面的比率);
       (2)background-size: cover; 让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率);
       (3)background-size: 100px 100px; 标明背景图片缩放的尺寸大小;
       (4)background-size: 50% 100%; 百分比是根据内容标签元素大小来缩小放大;
3、CSS3选择器
       (1)E:nth-child(n):匹配父元素的第n个子元素E;
       (2)E:nth-last-child(n):匹配父元素的倒数第n个子元素E;
       (3)E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E;
       (4)E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E;
       (5)E:only-of-type:匹配同类型中的唯一的一个同级兄弟元素E;
       (6)E:empty:匹配没有任何子元素(包括text节点)的元素E;
       (7)E:checked:单选框、复选框被选中时的效果;
       (8)input:focus;输入控件激活时的效果。

原文地址:https://www.cnblogs.com/wangjie-01/p/4634473.html