时间:2021-07-01 10:21:17 帮助过:33人阅读
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动画
tan
这里聊聊炫酷的-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; }
这里注意几点:
-webkit-overflow-scrolling:touch 滑动很顺滑 在iOS 5+上促使一个元素类似Native的快速滚动和回弹的效果
.selector { overflow: auto;/* auto | scroll */ -webkit-overflow-scrolling: touch;}
-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 + 背景色,在自带浏览器中背景色溢出到圆角以外部分=>使用四个拓展最后一个合并
属性 | 描述 | CSS |
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
函数 | 描述 | 实例 | |
转换 | |||
translateX(n) translateY(n) | 沿着 X 或Y 轴移动元素。 | ||
translate(x,y) | 沿着 X 和 Y 轴移动元素。 | 值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。 div{ | |
缩放 | |||
scaleX(n) scaleY(n) | 改变元素的宽或高度。 | ||
scale(x,y) | 改变元素的宽度和高度。 | 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。 div{ | |
定义 2D 旋转 | |||
rotate(angle) | 在参数中规定角度。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈 | 值 rotate(30deg) 把元素顺时针旋转 30 度。 div{ | |
倾斜 | |||
skewX(angle) skewY(angle) | 沿着 X 、或Y轴。 | ||
skew(x-angle,y-angle) | 沿着 X 和 Y 轴。 | 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。 div{ | |
使用六个值的矩阵。 | |||
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 matrix() 方法把所有 2D 转换方法组合在一起。 | 使用 matrix 方法将 div 元素旋转 30 度 div{ |
最好大家自己都去试试这些css3的用法