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方案

文本新增样式

盒模型新增样式

新增UI样式

最新文章

热门文章