CSS3笔记

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;
　　}
}