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的更多相关文章

  1. Webkit CSS properties

    Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit- ...

  2. Webkit内核探究【2】——Webkit CSS实现

    注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...

  3. Webkit内核探究【2】——css简介

    注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...

  4. PC网站CSS分享

    这里想总结些编写网页的经验,以PC端的为主,前面总结过后台的,今天写些前台的,参考了bootstrap3.3.5.bootstrip2.3.2和模版matrix. 前段时间还写过一篇<前端基础学 ...

  5. 让那些为Webkit优化的网站也能适配IE10

    特别声明:此篇文章由David根据Charles Morris的英文文章原名<Adapting your WebKit-optimized site for Internet Explorer ...

  6. webkit webApp 开发技术要点总结

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...

  7. 让那些为Webkit优化的网站也能适配IE10(转载)

    转载地址:http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html 特 ...

  8. webkit webApp 开发技术要点总结【转】

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...

  9. 手机开发必备技巧:javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...

  10. 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 ...

随机推荐

  1. 团队作业8——测试与发布(Beta阶段)之展示博客

    展示博客 1. 团队成员的简介和个人博客地址,团队的源码仓库地址. a.陈福鹏 擅长技术:java.web等网站方面技术: 博客:http://www.cnblogs.com/royalchen/b. ...

  2. AT89C51的内部4K flash,

    AT89C51的内部4K flash, 是用来下载程序代码的,程序运行时只能做读取数据操作,不能写入.单片机断电时需要候保存数据,可以选择 带EEPROM的单片机 就可以,如STC 系列的单片机有内部 ...

  3. 性能分析_linux服务器CPU_Load Average

    CPU度量Load Average 1.  概念介绍 1.1  Linux系统进程状态 在linux中,process有以下状态: runnable (就绪状态):blocked waiting fo ...

  4. MiniUI框架合并单元格

    在项目中遇到合并单元格的问题,所以总结一下. 用的是miniUI框架,所以只谈miniUI中的单元格合并. (1)必须添加onLoad="onLoad" (2)需要在JS中进行单元 ...

  5. mysql group by分组查询

    分组的SQL语句有2个: group by 和分组聚合函数实现 partition by (oracle和postgreSQL中的语句)功能 group by + having 组合赛选数据 注意:h ...

  6. macOS & SVN

    macOS & SVN mac 下已经自带了svn环境; 使用 svn –version 查看版本号 安装方法: 已安装 XCode,只需要在 code > Preferences &g ...

  7. URL query string中文字符问题

    如果URL的query string中包含中文字符,在不做特殊处理的情况下通过 request.getParameter 方法是获取不到正确的信息的,这是由于下面的两个机制造成的 浏览器会自动对URL ...

  8. 用java和junit编写app自动化测试用例

    package myTest; import static org.junit.Assert.*; import io.appium.java_client.android.AndroidDriver ...

  9. Luogu4885 灭顶之灾

    显然1的位置确定了整个矩阵,每一段连续的数即是对该位置的限制.化一下式子可以发现是一段区间或一段区间的补集,最后要求的是他们的交.看起来不太好求,于是转为求补集的并,那么排个序就完了. #includ ...

  10. python selenium判断元素是否存在的问题

    爬虫的时候经常用到这个,找到了一个比较好用的方法 原文链接:http://blog.csdn.net/u012189659/article/details/36391837 背景:selenium+p ...