XZ_CSS之CSS新增特性

1>RGBA透明度

RGB（红色R+绿色G+蓝色B），RGBA则在其基础上增加了Alpha通道，可用于设置透明值

div.test1{

background-color:rgba(220,0,0,1.0);

}

.test2{

background-color:rgba(220,0,0,0.8);

}

.test3{

background-color:rgba(220,0,0,0.6);

}

.test4{

background-color:rgba(220,0,0,0.4);

}

.test5{

background-color:rgba(220,0,0,0.2);

}

<divclass="test1">1</div>

<divclass="test2">2</div>

<divclass="test3">3</div>

<divclass="test4">4</div>

<divclass="test5">5</div>

2>块阴影和圆角阴影

box-shadow         text-shadow

box-shadow 属性向框添加一个或多个阴影。默认值是none

语法

box-shadow: h-shadowv-shadowblur spreadcolor inset;

h-shadow ：必需。水平阴影的位置。允许负值。 

v-shadow：必需。垂直阴影的位置。允许负值。

blur ：可选。模糊距离。

spread：可选。阴影的尺寸。

color：可选。阴影的颜色。

text-shadow 属性向文本设置阴影。

语法

text-shadow: h-shadowv-shadowblur color;

h-shadow ：必需。水平阴影的位置。允许负值。 

v-shadow：必需。垂直阴影的位置。允许负值。

blur ：可选。模糊距离。

spread：可选。阴影的尺寸。

color：可选。阴影的颜色。

div{

/*设置盒子阴影*/

box-shadow:10px-5px10px greenyellow;

}

p{

/*设置文字阴影*/

text-shadow:5px-5px10px palevioletred;

}

3>圆角

boder-radius

属性允许您为元素添加圆角边框！border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法

border-radius: 1-4 length|% /1-4 length|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

length 定义圆角的形状。

% 以百分比定义圆角的形状。

div{

width:200px;

height:60px;

margin:10px;

padding:10px;

/*设置圆角*/

/*border-radius: 100px;*/

border-top-left-radius:10px;

border-bottom-right-radius:10px;

}

<divclass="test1">1</div>

4>边框图片

border-image

border-image 属性是一个简写属性，用于设置以下属性：

• border-image-source 用在边框的图片的路径。
• border-image-slice 图片边框向内偏移。
• border-image-width 图片边框的宽度。
• border-image-outset 边框图像区域超出边框的量。
• border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

默认值 ：none 100% 1 0 stretch

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

div

{

-webkit-border-image:url(border.png)3030round;/* Safari 5 */

-o-border-image:url(border.png)3030round;/* Opera */

border-image:url(border.png)3030round;

}

5>形变

transform:none | <transform-function>[<transform-function>]

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法

transform: none|transform-functions;

值描述 none定义不进行转换。 matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y)定义 2D 转换。 translate3d(x,y,z)定义 3D 转换。 translateX(x)定义转换，只是用 X 轴的值。 translateY(y)定义转换，只是用 Y 轴的值。 translateZ(z)定义 3D 转换，只是用 Z 轴的值。 scale(x,y)定义 2D 缩放转换。 scale3d(x,y,z)定义 3D 缩放转换。 scaleX(x)通过设置 X 轴的值来定义缩放转换。 scaleY(y)通过设置 Y 轴的值来定义缩放转换。 scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle)定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle)定义 3D 旋转。 rotateX(angle)定义沿着 X 轴的 3D 旋转。 rotateY(angle)定义沿着 Y 轴的 3D 旋转。 rotateZ(angle)定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle)定义沿着 X 轴的 2D 倾斜转换。 skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。 perspective(n)为 3D 转换元素定义透视视图。 

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg);/* IE 9 */

-moz-transform:rotate(7deg);/* Firefox */

-webkit-transform:rotate(7deg);/* Safari 和 Chrome */

-o-transform:rotate(7deg);/* Opera */

}

6>box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素，默认值为content-box。

语法

box-sizing: content-box|border-box|inherit;

值描述content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。