前端在线资源
本文地址：
一、引导之言
虽然现代浏览器支持CSS3，但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。像box-shadow, border-radius这类属性，目前较新版本的浏览器都是不需要前缀的（包括IE9），但是，有些CSS3属性，例如渐变，oh,my GEE GEE，前缀少不了，于是每次应用都像是建大楼一样，如下jQuery Mobile CSS中的某一渐变截图：
比楼高是很傻逼的一件事情，所以如此霸气侧漏的CSS大楼反而让人伤不起，我们总希望一马平川小山丘，老天开眼掉美妞。心中甚是希望跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在，于是，一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的东西。有了这个东西，嘿嘿，阴沉的天空顿时划出一道圣洁光芒。
二、prefixfree.js的使用
首先，在页面的头部调用如下脚本：
&script src="/prefixfree/prefixfree.min.js">&/script>
github有时候会出现反应迟钝的情况，您还可以调用如下链接：
&script src="/study/js/mini/prefixfree.min.js">&/script>
然后，随便你是在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性。使用非常之轻松惬意。
例如后面这个demo页面所展示的，您可以狠狠地点击这里：
demo页面的渐变相关代码就是下面寥寥两行：
background-color: #a0b3d6;
background-image: linear-gradient(top, #beceeb, #34538b);
但是，所有较新的现代浏览器下都长得一表人才，例如支持渐变较晚的Opera浏览器：
是不是简单得让人提不起精神哈！
貌似prefixfree项目的首页你可以去这个地址查看：
该页面上列出了prefixfree.js几个局限性的地方：
@import-ed之类文件不鸟
跨域链接样式不鸟
无前缀链接样式Chrome和Opera下部分不鸟
行内style无前缀值在IE和FireFox3.6以下不鸟，FireFox 3.6下的属性亦如此
浏览器支持
目标浏览器为IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome。
三、prefixfree.js应用之Animatable
Animatable是纳尼？
Animatable这东东似乎与prefixfree.js的有些同父这般狗血的血缘关系。因为Animatable项目的页面地址是：
这就跟打死我也不相信王语嫣和神仙姐姐没有关系一样。八卦先扔一边，Animatable借助prefixfree.js将CSS中各个属性的动画效果都展示出来了。有些动画效果是不看不知道，看了吓一跳。比如说第四个晃得我眼睛看到星星的纹理动画效果：
我看了这些动画效果，顿生了不少灵感和渐进增强的交互应用，不知你是否也有些想法呢？
Animatable项目页面动画效果的批量实现原理如下：
1. 遍历页面上每个含有data-property属性的a元素；
2. 根据dom元素上的data-property值，form值和to值组装无前缀的CSS3 animate样式代码；
3. 以style节点元素的形式将组装的CSS代码append到head标签中，因页面调用了prefixfree.js脚本，于是各个浏览器下的animate CSS被渲染，效果呈现。
用一个成语形容上图内容就是：百画齐放——一百个动画效果一起播放。
注：颜色的动画效果嘛，还是使用hsla颜色更好些。
prefixfree.js可以大大简化偶们CSS3代码的数量，Animatable可以为我们实现一些交互效果提供灵感。上面我提到过我实现一些效果的灵感，例如下面这个例子，层的悬空动画效果：
鼠标以上去，div层左上位置，同时阴影越来越大，越来越淡。模拟真实世界的场景，于是就有了悬空感觉的效果。我们可以将类似这样子的效果渐进增强式的应用在我们的页面上，会是我们的页面蓬荜生辉的。
您可以狠狠地点击这里：
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.757) (0.243) (0.243) (0.142) (0.142) (0.142) (0.142) (0.142) (0.126) (0.126) (RANDOM - 0.015)
标签： , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
热门总排行css常用效果总结
28022次浏览
css有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
代码如下：
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);//谷歌浏览器
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
&param value=&false& name=&menu&/&
&param value=&opaque& name=&wmode&/&
2、DIV可编辑，就是让一个div变成一个类似input输入框的效果。
在div中添加contentEditable=&true& 属性就可以了，如下：
&div id=&div1& contentEditable=&true&
&div id=&div2& contentEditable=&true& &&/div&
&div contentEditable=&true&
id=&div3&&&/div&
其中，我后面有篇编辑器的文章
就用到了这个功能！这个是获得iframe光标所在位置的父节点名称，iframe中就用到了contentEditable=&true& 属性。
3、有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性：
unselectable=&on& onselectstart=&&
具体代码：
&div unselectable=&on& onselectstart=&&&
sdfsdfswerwer
这样，DIV里面的东西就不能选择复制了！
4、CSS 中form表单两端对齐
做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
text-align:
text-justify:distribute-all-/*ie6-8*/
text-align-last:/* ie9*/
-moz-text-align-last:/*ff*/
-webkit-text-align-last:/*chrome 20+*/
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:&.&;
display: inline-
width:100%;
html代码：
&div class=&box1&&
&div class=&test1&&姓 名&/div&
&div class=&test1&&姓 名 姓 名&/div&
&div class=&test1&&姓 名 名&/div&
&div class=&test1&&所 在 地&/div&
&div class=&test1&&工 作 单 位&/div&
5、input声音录入按钮，（紧支持谷歌）
如下图红色框框中的按钮
代码如下：
&input type=&text& class=&box& name=&s& id=&s& class=&inputText& placeholder=&输入关键词&
x-webkit-speech&
添加 x-webkit-speech 属性就可以了。
6、给input的placeholder设置颜色
设置方法如下：
::-webkit-input-placeholder { /* WebKit browsers */
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { /* Mozilla Firefox 19+ */
:-ms-input-placeholder { /* Internet Explorer 10+ */
10、CSS :after 和：before选择器
after选择器通常在clear中使用，用法如下：
.clearfix:after{display:visibility:clear:height:0;content:'.';font-size:0}
写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。
也可以在某个元素前面或者后面追加，例如：
content:&haorooms：-&;
background-color:
font-weight:
每个p标签后面都加了一个 -haorooms
11、透明度
opacity: .9;
filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；
.haorooms{opacity: 0; cursor:
-ms-filter:&progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&;filter: alpha(opacity=0);}
12、超出长度显示省略号
单行文本显示...
一般要指定宽度，然后给如下四个属性。
white-space:
text-overflow:
案例代码：
.haorooms{width:200display:overflow:white-space:text-overflow:}
多行文本显示....
主要属性-webkit-line-clamp
overflow :
text-overflow:
display: -webkit-
-webkit-line-clamp: 2;
-webkit-box-orient:
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
line-height:1.4
/* 3 times the line-height to show 3 lines */
height:4.2
p::after {
content:&...&;
font-weight:
padding:0 20px 1px 45
// background:url(和网页背景颜色一样的一张背景图) repeat-y;
background-color:#
height高度正好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
要支持IE8，需要将::after替换成:after；
13、阴影效果
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
14、CSS强制换行和不换行
word-wrap: break-
word-break:
强制英文单词断行
word-break:break-
强制不换行
white-space:
15、CSS 圆角
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。
目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15
border-radius: 15
（注意：border-radius必须放在最后声明，否则可能会失效。）
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
-moz-border-radius-topleft（标准语法：border-top-left-radius）
-moz-border-radius-topright（标准语法：border-top-right-radius）
-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）
18、css3弹性盒子
#haorooms ul { //父亲
display: -moz-
display: -webkit-
-moz-box-orient:
-webkit-box-orient:
box-orient:
ul li{ //儿子设置
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
关于css3弹性盒子模型之box-flex，我在博客中暂时没有写相关文章，因为这个属性不支持IE，且是老版本的用法。
新版本用法：
html如下：
&div class=&m_topnav&&
&a class=&m_navli m_current& href=&#&&员工管理&/a&
&a class=&m_navli& href=&#&&员工动态&/a&
.m_topnav{ display: -webkit-display: -moz-display:width:100%;height:1background-color:#border-bottom:1px solid #}
.m_navli{-webkit-flex:1;-moz-flex:1;flex:1;position:font-size:.24text-align:line-height: 1}
直接用display:flex方法，支持IE11+ 及所有主流浏览器。
另外，jquery mobile 有一套网格布局法，很不错，支持IE的，有时间可以参考一下，或者研究一下他们是怎么写的，参照他们的方法可以自己改写一下！
关于弹性盒子式的布局，大家也可以看下bootstrap,bootstrap提出栅格类的一个说法，你引进他的css之后，可以用col-mid-*来进行布局。例如：
&div class=&row&&
&div class=&col-md-6&&.col-md-6&/div&
&div class=&col-md-6&&.col-md-6&/div&
各站一半！
&div class=&row&&
&div class=&col-md-8&&.col-md-8&/div&
&div class=&col-md-4&&.col-md-4&/div&
前面的是整个宽度的三分之二，后面是整个宽度的三分之一！
具体可以看看bootstrap的样式解释：
19、textarea禁止拖动
resize: //禁止拖动
以下是resize属性的的各个取值:
none：用户不能操纵机制调节元素的尺寸；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：让用户可以调节元素的高度；
inherit：默认继承。
20、div垂直居中的方法总结
的方法，看我写的一篇文章吧！
21、css固定宽高DIV内部元素垂直居中的方法
和上面的20不同，这里说的是一个div内部元素如何垂直居中，具体请看：
22、纯css制作鼠标移上去显示图片效果
具体请看我的一篇文章：
23、CSS3的一些前缀总结
css3为了更好的兼容多个浏览器，通常前面加一大堆前缀，有时候感觉很烦，前缀也容易忘记或者漏掉。下面总结一下！
/*为Chrome/Safari*/
/*为Firefox*/
/*为Opera*/
以旋转为例
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/
以border-radius为例(本文上面案例15，CSS 圆角已经提过圆角的问题，下面我们再来重提一下)：
-moz-border-radius: 12 /* FF1-3.6 */
-webkit-border-radius: 12 /* Saf3-4, iOS 1-3.2, Android &1.6 */
border-radius: 12 /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
FF4、Saf5以及Chrome都支持border-radius属性了，我们就没有必要写以上两条了，代码变成：
border-radius: 12
所以有些常用的CSS3效果，由于浏览器都支持了，就不需要前缀，但是为了保险起见，你也可以加上前缀！
24、css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。
案例如下：
div.container
box-sizing:border-
-moz-box-sizing:border- /* Firefox */
-webkit-box-sizing:border- /* Safari */
width:50%;
&div class=&container&&
&div class=&box&&这个 div 占据左半部分。&/div&
&div class=&box&&这个 div 占据右半部分。&/div&
box-sizing: content-box|border-box|
25、模糊遮罩效率，模糊滤镜效果
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
Blur：模糊效果。使选择区内的影像产生虚化的效果，可以平滑的转换影像中的生硬部分。
26、渐变效果
默认渐变是从上往下代码如下：
background:#ed4a60;
background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
background: -o-linear-gradient(#ed5a5e, #ed3a61);
background: -moz-linear-gradient(#ed5a5e, #ed3a61);
background: linear-gradient(#ed5a5e, #ed3a61);
前面加一个参数，right,left,bottom,top等，就可以指定渐变方向：
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
还可以从左上角开始渐变left top，right top(右上角)以此类推，代码如下：
background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);
另外还可以指定渐变角度，这个角度是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。
代码如下：
background: -moz-linear-gradient(&angle&, #ace, #f96);
background: -webkit-gradient(&type&,&angle&, from(#ace), to(#f96));//老的写法
background: -webkit-linear-gradient(&angle&, #ace, #f96);
background: -o-linear-gradient(&angle&, #ace, #f96);
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
关于渐变就写到这里！
相关文章：
关键词搜索如发现本博客有您的作品被违规引用请邮件通知，我将删去违规作品
最新更新：合集地址搬迁成功
更新日志：09.2.26 官方emule更新到0.49c
最新更新：【译稿】大家的街头のPonyo No.24
更新到第十六期
正在完善中扫描二维码: 已优化适合手机访问
&&★ 相关文章css3各种类型浏览器前缀简单分享
来源：博客园
css3各种类型浏览器前缀简单分享:在写此文章的时候，很多css3属性在当前还属于实验性质的，在使用它们的时候，前面通常要加上各个类型浏览器的前缀。下面就做一下分享罗列:

-webkit-transform:rotate(45deg);/*谷歌和Safari浏览器*/
-o-transform:rotate(45deg);/*Opera浏览器*/
-moz-transform:rotate(45deg);/*火狐浏览器*/
-ms-transform:rotate(45deg);/*IE浏览器*/

关于transform可以参阅一章节。
原文地址是:/forum.php?mod=viewthread&tid=16499
更多内容可以参阅:/divcss/
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动