CSS3动画手册:https://isux.tencent.com/css3/index.html?transform
 
CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1.html    http://www.w3cplus.com/css/centering-css-complete-guide.html
 
CSS魔法:http://www.cssmagic.net/
 
你很熟悉CSS,却没掌握这些CSS技巧:http://www.html5cn.org/article-9294-1.html
 
如果你想确保哪些属性还需要依赖于前缀来工作,可以通过CanIuse查询:http://caniuse.com/
检测浏览器对HTML5和CSS3的支持性:http://fmbip.com/litmus
 
CSS3在线生成器:http://www.css3maker.com/
 
CSS视口单位快速入门:https://juejin.im/post/590091c81b69e60058b715c5?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
 
CSS3奇思妙想,使用CSS3实现各类图形:http://chokcoco.github.io/magicCss/html/index.html#pesudo
 
制作CSS图片:https://segmentfault.com/a/1190000008627248
 
CSS3渐变生成器:http://www.colorzilla.com/gradient-editor/
 
腾讯CSS3动画制作工具:http:http://isux.tencent.com/css3/tools.html
 
CSS3动画实用技巧教程:http://www.html5cn.org/article-7806-1.html
 
CSS3 UI 库:http://css3lib.alloyteam.com/
 
CSS3为图片添加hover的CSS库:http://webres.wang/css-libraries-for-adding-image-hover-effects/?utm_source=top.caibaojian.com/98081&from=weibo.com/kujian
 
CSS3 :hover时的各种效果:http://linxz.github.io/CSS_Skills/demo/other/about_hover_pseudo_class.html
 
CSS3渐变效果:http://www.w3cplus.com/content/css3-gradient
 
CSS3 3D旋转效果:http://www.w3cplus.com/css3/css3-3d-transform.html
 
CSS3加载进度提示效果:http://www.html5cn.org/article-6458-1.html
 
CSS3动画库:http://speckyboy.com/2015/09/09/css-animation/
 
CSS3百叶窗图片切换:http://www.html5cn.org/article-6860-1.html
 
CSS3制作圆环进度动画效果:http://caibaojian.com/css3-round.html?wb
 
CSS3 clip-path裁剪各种形状:http://bennettfeely.com/clippy/
 
字体下载和转换:http://www.dafont.com/    http://www.fontsquirrel.com/tools/webfont-generator
 
高效CSS选择器编写注意事项:http://web.jobbole.com/35339/
 
炫酷CSS3复选框checkbox样式美化效果:http://www.html5cn.org/article-8755-1.html
 
jquery+css3圆环百分比进度条制作:http://caibaojian.com/jquery-circular-progress.html?wb
 
select原生控件修饰器:http://aui.github.io/popupjs/doc/selectbox.html     http://caibaojian.com/css-select-2.html?wb
 
判断浏览器是否支持css3的属性
var element = document_create Element ('div');   
if('text-overflow' in element.style){       
     element.style['text-overflow'] = 'ellipsis';       
     return element.style['text-overflow'] === 'ellipsis';       
}
else{       
     return false;   
}
 

为容器的四个内边距添加相同的数值(15px),但是容器内的文字让上下两边的内边距显得比左右两边更大一些。容器看起来并不协调。究其原因就是在水平方向上字体形状更加连贯,导致我们的眼睛认为垂直方向上的多余空间都是内边距。因此,我们在垂直方向上减少内边距,才能让四边的内边距看起来一致。

inherit 可以被应用到任何的 CSS 属性上,并且会根据父级元素的属性计算出恰当的值(如果是伪元素,那么就会根据当前元素属性来计算)。比如,让表单元素和页面其他元素具有相同的字体,无需一一指定,直接使用 inherit。

当属性值相互关联时,应该在代码中体现它们的关联性,使代码更具有维护性。 比如font-size和line-height之间的关联,子元素使用em继承父元素font-size等。
 
background:rgba(0,0,0,0.6)  //前面三个数值分别代表R,G,B数值,最后一个数值代表透明度,它和opacity属性的区别是:父容器的opacity会影响子元素的透明度,而rgba不会影响。
完美兼容各浏览器的办法:http://www.cnblogs.com/PeunZhang/p/4089894.html
http://www.zhangxinxu.com/wordpress/2010/05/rgba
或者
.class {

  filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#99000000');
}
:root .class {
  filter:none; /*处理IE9浏览器中的滤镜效果*/
  background-color:rgba(0,0,0,0.6);
}

border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;

 如果斜杠/前后都设了值,那么斜杠前面的值就设定横向的圆角半径值,而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话,就把横向跟纵向的值设定为相等。 

对于p:nth-child(2)选择器,意味着选择一个元素如果:
1、这是个段落元素
2、这是父标签的第二个子元素
对于:nth-of-type(2)选择器,意味着选择一个元素如果:
1、选择父标签的第二个段落子元素(限制条件少些)

参考博客:http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/

 
box-flex  //属性规定框的子元素是否可伸缩其尺寸。父元素添加display:box,定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素
 
box-sizing:content-box;和box-sizing:border-box;的用法和区别:http://www.w3cplus.com/content/css3-box-sizing
 

利用CSS3选择器选择第7到14个元素:ul li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
这个功能在Safari中不起效。解决方案:只需将选择器中的顺序换一下,变成这样:ol li:nth-child(-n+14):nth-child(n+7)。Webkit不能识别这种写法,所以你最终还是可以让它在Safari中正常运行。

 
placeholder在文本框内水平居中:
input[type="text"]::-webkit-input-placeholder{text-align: center;}
input[type="text"]::input-placeholder{text-align: center;}
 
border-radius(圆角):水平半径 垂直半径(如果要画圆,盒子必须宽度=高度,半径:宽度/2)
 
box-shadow(阴影):内/外(默认是外,设置inset则为内) 水平 垂直 半径(阴影扩散) 颜色,多重阴影只需将两组值使用逗号分隔开即可,这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上(文字阴影同理)
 
text-shadow:0 1px 0 hsl(0,0%,100%,0.75);  //浮雕效果,诀窍:不要模糊,不要水平阴影,仅在垂直方向设置1或2像素的"白影"即可
 
linear-gradient(线性渐变):(90deg,#fff 0%,#e4e4e4 50%,#fff 100%)  //渐变方向 渐变起点(起点的颜色和位置,允许为负值,则在可见区域之外) 过渡颜色点(逗号分隔,自定义更多)  渐变终点
 
transform-style:preserve-3D(子元素将保留其3D位置)/flat(子元素将不保留3D位置);
 
perspective:1000px;  //设置从何处查看一个元素的角度,即定义3D元素距眼睛的距离,以像素定义当为元素定义perspective属性时,其子元素获得透视效果,不是本身
 
backface-visibility:hidden;  //当属性定义元素不面向屏幕时是否可见,即不显示元素背面
 
@keyframes 规则:from{}to{}  //使元素匀速向下移动,从哪到哪
 
animation:规则名称,运行时间,运行速度,运行次数,动画是否在下一周期逆向地播放,规定动画是否正在运行或暂停
 
@keyframes-selector{from{}to{}}  //默认0-100%,from(与 0% 相同),to(与 100% 相同)
 
transition关注的是CSS属性的变化,animation作用于元素本身而不是样式属性。在Chrome下,使用过渡效果transition时有时会出现页面闪动,方法:
-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
 
transform:scale(0.9);//缩放元素比例,1为默认
 
如果overflow-x和overflow-y的值不同,其中一个属性值被赋值为visible,而另一个属性值被赋值为auto、scroll、hidden,那么visible会被重置为auto,出现滚动条。
 
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
注意里面的反斜杠,它跟font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。如果简写时缺少某一个属性值,则background失效。
 
background-size有两个预设值contain和cover,contain是将背景图片等比缩放到宽度或高度与容器的宽度或高度相等,背景图片始终被包含在容器内;而cover是将背景图片等比缩放到完全覆盖容器,背景图片有可能超出容器。
 
HSL(色相、饱和度、亮度)也可以设置元素的颜色,而且HSLA透明规则和RGBA一样。
使用HSL可以轻松方便地实现鼠标悬停时颜色加深的效果:#btn{background-color: hsl(359,99%,50%);}  #btn:hover{background-color: hsl(359,99%,40%);}(RGBA方法同理)

PhotoShop阴影效果转换成css中box-shadow

混合模式:PhotoShop提供了多种混合模式,但是CSS3只支持正常模式(normal)。
颜色: 阴影颜色。对应于CSS3阴影中的color值。
不透明度(Opacity): 阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。
角度(Angle):阴影的角度。
距离(Distance):阴影的距离。根据阴影的角度和距离,可以计算出CSS3阴影中的h-shadow和v-shadow。
h-shadowt = Distance * cos(180 - Angle)
v-shadowt = Distance * sin(180 - Angle)
扩展(Spread):阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
大小(Size):阴影的大小。
spread = Spread * Size
blur = Size - spread

box-shadow语法:
box-shadow: h-shadow v-shadow blur spread color inset;
text-shadow语法:
text-shadow: h-shadow v-shadow blur color;

text-shadow没有spread,所以不能完全实现。

 
组合使用CSS3属性实现按钮样式:
<a href="javasript:" class="btn">我的按钮</a>

.btn{
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  font-size: 25px;
  background-color: #b01c20;
  color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  text-shadow: 0 1px #000;
  box-shadow: 0px 0px 3px hsla(0,0%,26.6667%,0.8);
  background: linear-gradient(90deg,#b01c20 0%,#f15c60 100%);
}

用CSS3动画实现省略号动画:

<div class="loading"></div>

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis 2s infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

CSS3笔记的更多相关文章

  1. css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  2. 【css3笔记】---- 渐变的秘密

    <CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...

  3. CSS3 笔记四(Transforms/Transition/Animations)

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  4. CSS3 笔记三(Shadow/Text/Web Fonts)

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

  5. CSS3 笔记二(Gradients)

    CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...

  6. CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

  7. CSS3笔记(一)

    最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...

  8. CSS3笔记之第四天

    CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...

  9. CSS3笔记之第三天

    CSS浮动 float:right 伪类: a:link {color:#FF0000;}      /* 未访问链接*/ a:visited {color:#00FF00;}  /* 已访问链接 * ...

随机推荐

  1. ps:探索按钮按起落下的技巧

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-07-10) 先上图: 那个看上去想按下去的,那个看上去像自然地呢? 显而易见: 第一像按下去的,第二个像自然地. 原因: 渐变: ...

  2. 编写 Window 服务程序

    编写 Window 服务程序     一.直观认识Windows服务.        打开Windows“控制面板/管理工具/服务”,系统显示Windows服务列表.                  ...

  3. Java常见排序算法之快速排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  4. 【M32】在未来时态下发展程序

    1.在未来时态下发展程序,就是接受“事情总会变化”的事实,并准备应对之策. 2.记住,程序的维护者通常不是最初的开发者,因此,设计和实现的时候,应该考虑别人更好地理解,修改自己的程序. 3.重要的一点 ...

  5. 《Java虚拟机原理图解》 1.2、class文件里的常量池

    [最新更新:2014/11/11]  了解JVM虚拟机原理 是每个Java程序猿修炼的必经之路. 可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中 ...

  6. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  7. 生成html的几种方案

    方案1: ///   <summary > ///   传入URL返回网页的html代码 ///   </summary > ///   <param   name=&q ...

  8. Parse--Saving Images(翻译)

    原文地址:https://www.parse.com/tutorials/saving-images 学习如何创建一个关于允许用户拍照和上传到parse.com的APP 源码地址:https://gi ...

  9. windows下查看某个端口被哪个程序占用的方法

    经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,下面就介绍一种非常简单的方法,希望对大家有用 假如我们需要确定谁占用了我们的9050端口 ...

  10. Linux 查看物理内存

    free -k free -m free -b man free cat /proc/meminfo