CSS3新的UI方案
文本新增样式
一、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方案的更多相关文章
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- (转)[Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统) 内附unused-assets清除实例
转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17. http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html ...
- [Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统)
转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17. http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- 总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...
- 总结CSS3新特性(颜色篇)
颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...
- 使用Modernizr探测HTML5/CSS3新特性(转载)
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
随机推荐
- C++根据扩展名获取文件图标、类型
简述 在Windows系统中,根据扩展名来区分文件类型,比如:.txt(文本文件)..exe(可执行程序).*.zip(压缩文件),下面,我们来根据扩展名来获取对应的文件图标.类型. 简述 源码 源码 ...
- Struts2学习(三)上传下载
今天记录一下利用struts2实现上传下载,借此案例说明一下struts2的开发流程. 须要注意的是struts2版本号不同非常多地方的写法是不同的.本例使用struts2.3.15 .有差别的地方文 ...
- hive导入导出数据案例
查询数据: use ods;set /user.password=ODS-SH;select * from base_cdma_all limit 10; use tag_bonc;select * ...
- redis作为缓存场景使用,内存耗尽时,突然出现大量的逐出,在这个逐出的过程中阻塞正常的读写请求,导致 redis 短时间不可用
redis 突然大量逐出导致读写请求block 内容目录: 现象 背景 原因 解决方案 ref 现象 redis作为缓存场景使用,内存耗尽时,突然出现大量的逐出,在这个逐出的过程中阻塞正常的读写请 ...
- 系统丢失的DLL文件问题根源解决(纯净官网下载放心)(图文详解)(博主推荐)
导言 最近,身边的朋友们,问我,他电脑的win10系统里 mfc110.dll 丢失. 其他的系统文件丢失修复,是一样的步骤. 现象 大家也许,都会有这么一个习惯,动不动则就去百度上搜索. 其实啊,这 ...
- ASP.NET 获取IIS应用程序池的托管管道模式
asp.net 中怎样较为简单的获取网站程序池的托管管道模式 目前已知的方式是根据这个帖子https://github.com/kakalotte/... ,利用DirectoryEntry,但是程序 ...
- <Sicily>Polynomial
一.题目描述 Given a polynomial and the value of the variable x, you task is to calculate the value of the ...
- 运营商 WLAN
运营商 WLAN 运营商 WLAN 是 Android 9 中引入的一项功能,该功能可让设备自动连接到运营商实现的 WLAN 网络.在高度拥塞或信号覆盖范围较小的区域(如体育场或地铁站),运营商 WL ...
- CentOS7-1810 系统Samba配置说明
Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件.SMB(Server Messages Block,信息服务块)通信协议是微软(Microsoft)和英特尔(Intel)在198 ...
- python(1)处理图像
一提到数字图像处理,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因此, ...