文本新增样式

一、opacity:指定了一个元素的透明度 0~1

二、新增颜色模式rgba:很好的解决了背景透明,字体颜色不透明的需求。

三、文字阴影:text-shadow用来为文字添加阴影,而且可以添加多层,阴影值之间用逗号隔开(x轴偏移量,y轴偏移量,颜色,模糊程度)

四、文字描边:只有webkit内核才支持:-webkit-text-stroke(准确的来说不能算是css3的东西,但需要大家知道)

五、文字排版:direction:ltr 从左到右     rtl从右到左

       一定要配合Unicode-bidi:bidi-override 来使用

盒模型新增样式

一、盒模型阴影:box-shadow以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 (x轴偏移量,y轴偏移量,颜色,模糊程度)

        inset 默认阴影在框外,使用inset后,阴影在边框内

二、倒影:-webkit-box-reflect  设置元素的倒影(准确的来说不能算是css3的东西,但需要大家知道)三个值的顺序不能改

     倒影的方向

第一个值,above, below, right, left

倒影的距离
                                   第二个值,长度单位
                  渐变
          第三个值

三、resize:resize CSS 属性允许你控制一个元素的可调整大小性。(一定要配合overflow:auto使用)

      both:允许用户在水平和垂直方向上调整元素的大小。

        horizontal:允许用户在水平方向上调整元素的大小。

        vertical:允许用户在垂直方向上调整元素的大小。

四、box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。

  可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。

  content-box: 默认值,标准盒子模型。 width 与 height 只包括内容的宽和高,

         不包括边框(border),内边距(padding),外边距(margin)。

  border-box:width 和 height 属性包括内容,内边距和边框,但不包括外边距。

        这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。

新增UI样式

一、圆角:border-radius 

    注意
      百分比值
      在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
      在 11.50 版本以前的 Opera 中实现有问题。
      Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴都相对于盒子模型的宽度。
      在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。

二、边框图片

  border-image-source:属性定义使用一张图片来代替边框样式;如果只为none,则仍然使用border-style 定义的样式。

  border-image-slice:会通过规范将的图片明确的分割为9个区域:四个角,四边以及中心区域。值得百分比参照于image本身!!

  border-image-repeat :定义图片如何填充边框。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。

             stretch:拉伸

             repeat,round:平铺

  border-image-width 定义图像边框宽度。 默认值为1,不可继承

  border-image-outset属性定义边框图像可超出边框盒的大小   正值: 可超出边框盒的大小

三、背景

  css2{

    background-color 会设置元素的背景色

    background-image:属性用于为一个元素设置一个或多个背景图像,图像在绘制时,

              以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。

    background-repeat:CSS 属性定义背景图像的重复方式。

              背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

    background-position:指定背景位置的初始位置

              如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。

    background-attachment:决定背景是在视口中固定的还是随包含它的区块滚动的。

               fixed:此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动 。

               scroll:此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动

        }

  css3{

    background-origin:设置背景的渲染的起始位置 

             border-box

             padding-box

             content-box

    background-clip:设置背景裁剪位置

    background-size:设置背景图片的大小

            单值时,这个值指定图片的宽度,图片的高度隐式的为auto

            两个值: 第一个值指定图片的宽度,第二个值指定图片的高度

    background:简写属性  顺序无关

}

       

CSS3新的UI方案的更多相关文章

  1. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  2. (转)[Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统) 内附unused-assets清除实例

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  3. [Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统)

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  4. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  5. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  6. 总结CSS3新特性(Transform篇)

    概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...

  7. 总结CSS3新特性(颜色篇)

    颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...

  8. 使用Modernizr探测HTML5/CSS3新特性(转载)

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  9. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

随机推荐

  1. 【递推DP】POJ1163The Triangle

    题目链接:http://poj.org/problem?id=1163 事实上这个题目有非常多解法,可是我们能够看下这个用一位数组的高效动规解法,这个我上课时老师讲的,非常不错. 先保存最后一行4 5 ...

  2. HDU 1114 Piggy-Bank(一维背包)

    题目地址:HDU 1114 把dp[0]初始化为0,其它的初始化为INF.这样就能保证最后的结果一定是满的,即一定是从0慢慢的加上来的. 代码例如以下: #include <algorithm& ...

  3. Linux 经常使用快捷键

    桌面下: Alt+F5   取消最大化窗体 Alt+F9   最小化窗体  Alt+F10  最大化窗体  Alt+空格 打开窗体的控制菜单 (点击窗体左上角图标出现的菜单)     ctl+r   ...

  4. nj03---阻塞和线程

    Node.js最大的特性就是"异步式I/O"与事件紧密结合的编程模式.这种模式与传统的同步式IO线性的编程思路有很大的不同,因为控制流很大程度上要靠"事件"和& ...

  5. less06 引入(importing)

    main.less @wp:960px; .colorsss{ color: darkgreen; } index.css .color{ color: #ff6600; } style.less / ...

  6. bzoj3438: 小M的作物(那年花开最小割)

    3438: 小M的作物 题目:传送门 题解: 最小割标准水题(做了几天的最小割之后表示是真的水) 为什么水:博主已经做过两道基本一样的题目了... 详情参考:bzoj3894 代码: #include ...

  7. [CQOI2009] 叶子的颜色 解题报告(树形DP)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1304 Description 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为 ...

  8. 求从第一列走到第n列的最短路径

    11 14 23 12 18 21 13 10 28 15 29 17 无 无 25 如上表所示.求从第一列到第n列的最短路径,行数不定,列数不定.这种情况下用什么算法比较好 可能说的不大清楚,例如有 ...

  9. Rain and Umbrellas(dp)

    题目链接 http://codeforces.com/problemset/problem/988/F 令dp[i][j]为走到目标为i处,手里拿着第j把伞,同时注意,在某处可能存在不止一把伞 #in ...

  10. NodeJS学习笔记 进阶 (2)Nodejs进阶:MD5加密算法(ok)

    个人总结:这篇文章讲解了Nodejs中自带模块的MD5加密算法的使用,读完这篇文章需要15分钟,其实还有一个叫utility的包在npm上,也非常好用. 摘选自网络 简介 MD5(Message-Di ...