-webkit-css
WebKit CSS:
1.“盒模型”的具体描述性质的包围盒块内容,包括边界,填充等等。
.test{
-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius; //容器圆角
-webkit-box-sizing: sizing_model; 边框常量值:border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器阴影(参数分别为:水平X 方向偏移量;垂直Y 方向偏移量;高斯模糊半径值;阴影颜色值)
-webkit-margin-bottom-collapse: collapse_behavior; 常量值:collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button; //内置的CSS 表现,暂时只支持push-button
}
2.“视觉格式化模型”描述性质,确定了位置和大小的块元素。
.test{
direction: rtl
unicode-bidi: bidi-override; 常量:bidi-override/embed/normal
}
3.“视觉效果”描述属性,调整的视觉效果块内容,包括溢出行为,调整行为,能见度,动画,变换,和过渡。
.test{
clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量:auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量:visible(默认值)/hidden
-webkit-box-reflect: right 1px; 镜向反转
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量:fixed/scroll
-webkit-perspective: value; 常量:none(默认)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量:flat/preserve-3d; (2D 与3D)
}
4.“分页媒体”描述性能与外观的属性,控制印刷版本的网页,如分页符的行为。
.test{
page-break-after: auto; 常量:always/auto/avoid/left/right
page-break-before: auto; 常量:always/auto/avoid/left/right
page-break-inside: auto; 常量:auto/avoid
}
5.“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。
.test{
-webkit-background-clip: content; //常量:border/content/padding/text
-webkit-background-origin: padding; //常量:border/content/padding/text
-webkit-background-size: 55px; //常量:length/length_x/length_y
}
6.“字型”的具体描述性质的文字字体的选择范围内的一个因素。报告还描述属性用于下载字体定义。
.test{
unicode-range: U+00-FF, U+980-9FF;
}
7.“文本”描述属性的特定文字样式,间距和自动滚屏。
.test{
text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量:capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量:break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量:direction(方向) increment(迭代次数) repetition(重复) style(样式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(无穷次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量:capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量:circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量:normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量: normal/space
-webkit-rtl-ordering: logical; 常量:visual/logical
-webkit-user-drag: element; 常量:element/auto/none
-webkit-user-modify: read- only; 常量:read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量:text/auto/none
}
8.“表格”描述的布局和设计性能表的具体内容。
.test{
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量:always/auto/avoid/left/right
-webkit-column-break-before: right; 常量:always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量:avoid/auto
-webkit-column-count:; //分栏
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
}
9.“用户界面”描述属性,涉及到用户界面元素在浏览器中,如滚动文字区,滚动条,等等。报告还描述属性,范围以外的网页内容,如光标的标注样式和显示当您按住触摸触摸
目标,如在iPhone上的链接。
.test{
-webkit-box-align: baseline,center,end,start,stretch; //常量:baseline/center/end/start/stretch
-webkit-box-direction: normal;//常量:normal/reverse
-webkit-box-flex: flex_valuet;
-webkit-box-flex-group: group_number;
-webkit-box-lines: multiple; //常量:multiple/single
-webkit-box-ordinal-group: group_number;
-webkit-box-orient: block-axis; //常量:block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; //常量:center/end/justify/start
}
====================更新于“五四”青年节=======================
今天学了两个新属性
1.-webkit-touch-callout
当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
none:系统默认菜单被禁用
default:系统默认菜单不被禁用
.test{
-webkit-touch-callout: default /* displays the callout */
-webkit-touch-callout: none /* disables the callout */
-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset
}
2.-webkit-overflow-scrolling:touch;
可以让overflow;auto;的元素在手机上滑起来6的飞起。
速查总表:
http://www.css88.com/book/css/quicksearch.htm
-webkit-css的更多相关文章
- Webkit CSS properties
Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit- ...
- Webkit内核探究【2】——Webkit CSS实现
注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...
- Webkit内核探究【2】——css简介
注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...
- PC网站CSS分享
这里想总结些编写网页的经验,以PC端的为主,前面总结过后台的,今天写些前台的,参考了bootstrap3.3.5.bootstrip2.3.2和模版matrix. 前段时间还写过一篇<前端基础学 ...
- 让那些为Webkit优化的网站也能适配IE10
特别声明:此篇文章由David根据Charles Morris的英文文章原名<Adapting your WebKit-optimized site for Internet Explorer ...
- webkit webApp 开发技术要点总结
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...
- 让那些为Webkit优化的网站也能适配IE10(转载)
转载地址:http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html 特 ...
- webkit webApp 开发技术要点总结【转】
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...
- 手机开发必备技巧:javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...
- HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript Though it's not ...
随机推荐
- 团队作业8——测试与发布(Beta阶段)之展示博客
展示博客 1. 团队成员的简介和个人博客地址,团队的源码仓库地址. a.陈福鹏 擅长技术:java.web等网站方面技术: 博客:http://www.cnblogs.com/royalchen/b. ...
- AT89C51的内部4K flash,
AT89C51的内部4K flash, 是用来下载程序代码的,程序运行时只能做读取数据操作,不能写入.单片机断电时需要候保存数据,可以选择 带EEPROM的单片机 就可以,如STC 系列的单片机有内部 ...
- 性能分析_linux服务器CPU_Load Average
CPU度量Load Average 1. 概念介绍 1.1 Linux系统进程状态 在linux中,process有以下状态: runnable (就绪状态):blocked waiting fo ...
- MiniUI框架合并单元格
在项目中遇到合并单元格的问题,所以总结一下. 用的是miniUI框架,所以只谈miniUI中的单元格合并. (1)必须添加onLoad="onLoad" (2)需要在JS中进行单元 ...
- mysql group by分组查询
分组的SQL语句有2个: group by 和分组聚合函数实现 partition by (oracle和postgreSQL中的语句)功能 group by + having 组合赛选数据 注意:h ...
- macOS & SVN
macOS & SVN mac 下已经自带了svn环境; 使用 svn –version 查看版本号 安装方法: 已安装 XCode,只需要在 code > Preferences &g ...
- URL query string中文字符问题
如果URL的query string中包含中文字符,在不做特殊处理的情况下通过 request.getParameter 方法是获取不到正确的信息的,这是由于下面的两个机制造成的 浏览器会自动对URL ...
- 用java和junit编写app自动化测试用例
package myTest; import static org.junit.Assert.*; import io.appium.java_client.android.AndroidDriver ...
- Luogu4885 灭顶之灾
显然1的位置确定了整个矩阵,每一段连续的数即是对该位置的限制.化一下式子可以发现是一段区间或一段区间的补集,最后要求的是他们的交.看起来不太好求,于是转为求补集的并,那么排个序就完了. #includ ...
- python selenium判断元素是否存在的问题
爬虫的时候经常用到这个,找到了一个比较好用的方法 原文链接:http://blog.csdn.net/u012189659/article/details/36391837 背景:selenium+p ...