css3有哪些新增属性,CSS3新增属性

本篇文章为大家介绍一些CSS3新增的属性，CSS3新属性的出现弥补了CSS2版本的不足，解决了很多我们设置元素样式时的痛点。

1.文本阴影属性

text-shadow:水平距离 垂直距离 模糊半径(模糊程度) 阴影颜色

说明：阴影水平距离设置为正数时向右移动，负数时向左移动、阴影垂直距离设置为正数时向下移动，负数时向上移动

注意：模糊半径不能写负数，可以写多个文本阴影需要用逗号分隔

2.盒子阴影

box-shadow : 水平距离(必填，可为负值) 垂直距离(必填，可为负值) 模糊距离 阴影大小 阴影颜色 阴影位置(内侧或外侧)

举例：box-shadow: 10px 10px 8px 10px #999 inset;

3.文本换行

word-wrap 此属性来设置是否允许浏览器在单词内断句，解决一个字符串太长浏览器找不到自然断点而文本溢出的问题。

属性值：nomal 只在允许的断字点换行(浏览器默认属性) break-word 允许长单词或者长URL地址换行到下一行。

word-break

属性值：break-all 断句方式非常粗暴，不是将长单词挪到下一行而是单词内直接断句。 keep-all 文本不会换行只能在半角空格或连字符处换行。

4.背景属性

background-origin 背景图片原点(背景图片的起始点)

说明：指定background-origin属性应该是相对位置

属性值

padding-box 背景图片相对于padding作为显示起点 默认值

border-box 背景图片相对于border作为显示起点

content-box 背景图片相对于内容作为显示起点。

background-clip 背景裁切(背景显示区域)

说明：background-clip 属性规定背景的显示区域。

属性值

padding-box 背景被裁剪到内边距框。默认值

border-box 背景被裁剪到边框盒。

content-box 背景被裁剪到内容框。

注：背景是包含背景图片与背景颜色

background-size 背景图片尺寸

说明：background-size 规定背景图像的尺寸

属性值

像素为单位 (10px)

规定背景图的大小。第一个值宽度，第二个值高度。

百分比为单位(%)

以百分比(相对容器计算百分比)为值设置背景图大小，第一个值宽度，第二个值高度。

cover

把背景图片扩展至足够大，以使背景图像完全覆盖背景区域，背景图片部分会被裁切。

contain

当背景图片的宽高有一个方向触碰到元素的宽或者高的情况下，背景图片停止缩放。

backface-visibility:hidden,背景背面设置属性。

多背景图的设置

​ Element：background:url(),url() ; 多张背景图片引用，背景颜色只能加给最后的一次引用。background-size设置会统一多张背景图片大小。

5.透明度设置

opacity：0-1之间，0是透明，1是不透明。注：给当前元素添加opacity会影响元素里内容(文本、图片、子元素)的透明度。IE9以下不支持opacity。

rgba(r,g,b,a)a的取值是0-1之间，0是透明，1是不透明，给元素添加rgba不会影响元素里内容(文本、图片、子元素)的透明度。IE9以下不支持。

filter：alpha(opacity=1-100)1是透明，100是不透名，IE浏览器专用。

6.图片边框

可以将图片设置为元素的边框

border-image(必须给当前元素添加border属性才能使用border-image，border属性写在border-image前边。) 属性是一个简写属性，用于设置以下属性:

border-image-source 用在边框的图片的路径。

border-image-slice 图片边框向内偏移(不加单位)。第一个值代表表左右边框，第二个值代表上下边框。

border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。第一个值代表上下边框，第二个代表左右边框。

border-image-outset 边框图像区域超出边框的量(值是一个倍数,不可以简写border-image)。

border-image-width 图片边框宽度(不可以简写border-image)。一个值四个方向，border-image-width：上下 左右

7.CSS圆角属性

border-radius：一个值代表四个方向，上右下左

border-radius：左上/右下 右上/左下

border-radius：左上 右上/左下 右下

border-radius：左上 右上 右下 左下

圆角大小的原理：border-radius:5px;

常用的技巧：border-radius:50%; 将正方形块元素转换为圆形。

8.pointer-events

阻止用户的点击动作产生任何效果

阻止缺省鼠标指针的显示

阻止CSS里的 hover 和 active 状态的变化触发事件

阻止JavaScript点击动作触发的事件

提交页面，提交按钮点击后，添加这个样式属性(style=“pointer-events”)，来防止重复提交。

一些层的绝对定位，覆盖按钮，穿透可以点击它。

9.calc方法

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样，使用数学表达式来表示：

.elm {

width: calc(expression);

}

其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；

可以使用百分比、px、em、rem等单位；

可以混合使用各种单位进行计算；

表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

大家在实际使用时，同样需要添加浏览器的前缀

.elm {

/Firefox/

-moz-calc(expression);

/chrome safari/

-webkit-calc(expression);

/*Standard */

calc();

}