Css3炫酷总结使用_html/css_WEB-ITnose-HTML-Tutorial-php.cn

先从CSS3的选择器说起：　

　　E F：所有的子孙元素；

　　E>F: E中的子元素；

　　E+F：E元素之后的最近的选择器；

　　E~F：E中所以后面兄弟元素（CSS3 不包括自己本身，前面也不包括）

　　att*=val:只要包含指定的元素符（val1 val2 等等都算）；

　　att^=val：首字符匹配；

　　att$=val：尾字符匹配；

　　att~=val：用空格分隔，且其中一个是val；

　　att|=val：以val开头并用"-"连接符；

　　CSS3伪类选择器： first-line first-letter root not empty target before after first-child last-child nth-child(2) nth-last-child(odd) ;

　　　　　　阴影： box-shadow:水平偏移px 垂直偏移px 阴影模糊值 color

　　　　　　　　　box-shadow:3px 4px 2px #000;

　　　　　　　　　text-shadow: 5px -10px 5px red;

　　　　　　背景： background-size:10px 5px; background-clip: 背景的裁剪区域；background-origin:是指定background-position属性的参考坐标的起始位置；

　　　　　　　　 background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#fff), to(#000));

　　　　　　圆角边框：border-radius:10px 15px 20px 25px;

　　　　　　　　　　　border-top-right-radius:水平半径垂直半径（10px/30px）

　　　　　　　　　　border-radius:10px/20px 25px;//水平四个为10，垂直两个20两个25

　　　　　　　　　　椭圆形画法：把宽度的一半当水平半径，把高度的一半当垂直半径

　　　　　　媒体查询： Media Query：

　　　　　　　　　　　　 user-scalable:0不允许手动缩放

　　　　　　　　　　　　当屏幕的可视区域的宽度长度在600px和900px之间时，应用该样式文件

　　　　　　　　　　　　small.css中： @media screen and (min-width:600px) and (max-width:900px) {//...}

　　　　　　　　　　　　当移动设备处于纵向（portrait）模式下应用该模式；横向为landscape

边框属性 border-image-source:url(./***.png);//设图为81*81，九分法后每个是27*27

　　　　　　border-image-width: 27px；

　　　　　　border-image-slice：27；//四个角只显示九分中的一个；若为27*2=54，则显示九分中的四个；若为81则显示9个，切割为宽度的三倍

　　　　　　 border-image-outset：0px；//边框向外扩展的大小

　　　　　　 border-image-repeat：strench；//拉伸 repeat 重复模式，中间的2468进行不停重复

　　倒影属性 -webkit-box-reflect:above/below/left/right 100px -webkit-linear-gradient(top,transparent,#fff)

　　transition 过度：慢慢的从一个到另一个的效果 transition -webkit-transition:padding 1s ease-out,color 1s linear 1s;

　　　　四个参数（过度属性-property，过渡时间-duration，过度形式-timing-function，延迟时间-delay）

　　animation 动画参数（名字-name，-duration过渡时间，timing-function过渡形式，-delay延迟时间，-iteration-count循环次数，-direction是否反向，-play-state动画状态，-fill-mode动画时间之外的状态）

　　　　　　　　-webkit-animation:demo 2s linear 3s 3

　　　　　　　　@-webkit-keyframes demo {

　　　　　　　　0% {opacity:0;transform:translate(0px)}　　　//透明度平移

　　　　　　　　20% {opacity:0.2;transform:translate(20px)}

　　　　　　　　40% {opacity:0.4;transform:translate(40px)}

　　　　　　　　60% {opacity:0.6;transform:translate(60px)}

　　　　　　　　100% {opacity:1;transform:translate(100px)}　　　　　　　

}

附上弹窗的一个animation动画

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">        <title>tan</title>        <meta name="description" content="">        <meta name="keywords" content="">        <link href="" rel="stylesheet">        <style> .result-bg{ position:fixed;top:0;left:0; width:100%;height:100%; background-color:rgba(0,0,0,0.5); z-index:20 } .result{ display:block; position:absolute;top:0;left:0; z-index:21; width:16rem } .result.tan{ -webkit-animation:bouncein .8s ease-out backwards; -moz-animation:bouncein .8s ease-out backwards; -ms-animation:bouncein .8s ease-out backwards; animation:bouncein .8s ease-out backwards} @-webkit-keyframes bouncein{ 0%{opacity:0;-webkit-transform:scale(0.3)} 50%{opacity:1;-webkit-transform:scale(1.05)} 70%{-webkit-transform:scale(0.9)} 100%{-webkit-transform:scale(1)} } @keyframes bouncein{ 0%{opacity:0;transform:scale(0.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} } </style>    </head>    <body>        <div class="result-bg J-result-bg"></div>        <img  class="result J-result tan" src="http://b0.hucdn.com/party/default/89f818525d6539038a89e21235c3dd59.png" alt="Css3炫酷总结使用_html/css_WEB-ITnose" >    </body></html>

Nach dem Login kopieren

　　　　　　这里聊聊炫酷的-webkit-css：

　　　　　　　　　　-webkit-user-select:none 可以用它禁止被选中页面的内容:被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权;

　　　　　　　　　　　　　　在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

　　　　　　　　-webkit-touch-callout:none 在iPhone或者iPad上，当你触摸并按住触摸的目标，这个属性可以让你禁用系统默认菜单。为default 是默认弹出系统框

　　　　　　　　-webkit-line-clamp: 多行文本溢出显示省略号

　　　　　　　　　　　　　　大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。

　　　　　　　　　　　　　　如何解决多行显示省略号呢？

　　　　　　　　　　　　　　WebKit浏览器或移动端的页面可以采取 -webkit-line-clamp 它是一个不规范的属性，它没有出现在 CSS 规范草案中。它需要组合其他外来的WebKit属性。常见结合属性：

　　　　　　　　　　　　　　　　A. display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

　　　　　　　　　　　　　　　　B. -webkit-box-orient :vertical;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

　　　　　　　　　　　　　　　　C. text-overflow:ellipsis，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

　　　　　　　　　　　　　　跨浏览器兼容的方案：

 p { position:relative; line-height:1.4em;        /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden;    } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;    }

Nach dem Login kopieren

　　　　　　　　　　　　　　　　这里注意几点：

1. 1. 1. height高度是line-height的倍数，几行就是几倍；
    2. 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
    3. IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
    4. 要支持IE8，需要将::after替换成:after；

　　　　　　　　-webkit-overflow-scrolling:touch 滑动很顺滑在iOS 5+上促使一个元素类似Native的快速滚动和回弹的效果

.selector { overflow: auto;/* auto | scroll */ -webkit-overflow-scrolling: touch;}

Nach dem Login kopieren

　　　　　　　　-webkit-text-size-adjust:100% iOS浏览器横屏时会重置字体大小横竖屏时候字体自己跟着自适应，PC端此属性已经除去

　　　　　　　　-webkit-tap-highlight-color -webkit-tap-highlight-color 只用于iOS (iPhone和iPad)和Android。在你点击一个或者利用Javascript生成的可点击元素的时候，它就会出现一个半透明的灰色背景。

　　　　　　　　　　　　　　　　　　　　　　　　　　通过-webkit-tap-highlight-color，可以设置该属性为任何颜色。:-webkit-tap-highlight-color:transparent在Android下无效，透明可以通过rgba(0,0,0,0)实现。

　　　　　　　　-webkit-appearance:none 内阴影为none改变按钮在iPhone下的默认风格在IE系列和Opera浏览器上不支持“appearance”，而且Safari也只有3.0版本以上支持，而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。

　　　　　　　　　　　　　　　　　　　　　　　　　appearance的属性值 checkbox radio button listbox listitem等等例如设置button的话会让一段文字看起来像个button

　　　　　　　　　　border-radius　　　　　　　　　　Android 2.3:border-radius 在自带浏览器中不支持 %

　　　　　　　　　　　　　　　　　　　　　　　 Android 4.2.x:border-radius + border + 背景色，在自带浏览器中背景色溢出到圆角以外部分=>使用四个拓展最后一个合并

聊聊 Transform 引用 http://www.cnblogs.com/jingwhale/p/4639541.html

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2D Transform转换属性

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2D Transform 方法

函数	描述	实例
转换
translateX(n) translateY(n)	沿着 X 或Y 轴移动元素。
translate(x,y)	沿着 X 和 Y 轴移动元素。	值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。 div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 / -webkit-transform: translate(50px,100px); / Safari and Chrome / -o-transform: translate(50px,100px); / Opera / -moz-transform: translate(50px,100px); / Firefox */ }
缩放
scaleX(n) scaleY(n)	改变元素的宽或高度。
scale(x,y)	改变元素的宽度和高度。	值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 div{ transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 / -webkit-transform: scale(2,4); / Safari 和 Chrome / -o-transform: scale(2,4); / Opera / -moz-transform: scale(2,4); / Firefox */ }
定义 2D 旋转
rotate(angle)	在参数中规定角度。turn是圈，1turn = 360deg；另外还有弧度rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn); //旋转两圈	值 rotate(30deg) 把元素顺时针旋转 30 度。 div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 / -webkit-transform: rotate(30deg); / Safari and Chrome / -o-transform: rotate(30deg); / Opera / -moz-transform: rotate(30deg); / Firefox */ }
倾斜
skewX(angle) skewY(angle)	沿着 X 、或Y轴。
skew(x-angle,y-angle)	沿着 X 和 Y 轴。	值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 / -webkit-transform: skew(30deg,20deg); / Safari and Chrome / -o-transform: skew(30deg,20deg); / Opera / -moz-transform: skew(30deg,20deg); / Firefox */ }
使用六个值的矩阵。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。 matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。	使用 matrix 方法将 div 元素旋转 30 度 div{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 / -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Firefox / -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Safari and Chrome / -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Opera */ }

最好大家自己都去试试这些css3的用法