首页 > Web开发 > 详细

CSS3学习总结

时间:2015-07-10 00:17:56      阅读:250      评论:0      收藏:0      [点我收藏+]

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;输入控件激活时的效果。

CSS3学习总结

原文:http://www.cnblogs.com/wangjie-01/p/4634473.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!