css3新增的属性有哪些

发布网友 发布时间：2022-04-06 10:22

我来回答

共3个回答

懂视网 时间：2022-04-06 14:44

1 text-shadow属性

（1）功能

给页面上的文字添加阴影效果。

（2）使用方法

text-shadow：length length length color （阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色）

注意：

阴影离开文字的横方向距离、纵方向距离：必须指定，可指定负值。

阴影的模糊半径：代表阴影向外模糊时的模糊范围。这个半径值越大，则阴影向外模糊的范围也就越大。可选参数，省略时，默认为0，代表阴影不向外模糊。

阴影的颜色：可选参数，不指定时在CSS2中使用color属性的颜色（实际Firefox和Opera，其他不支持省略，省则不绘制），CSS3中使用浏览器指定的默认色。

（4）指定多个阴影

text-shadow：10px 10px #f39800,
    40px 35px #fff100,
   70px 60px #c0ff00；

只有Chrome 、Firefox、Opera浏览器支持该功能。

（3）浏览器支持

到目前为止：Safari、Chrome 、Firefox、Opera浏览器支持该属性。

text-shadow：5px 5px 5px gray;（灰色阴影，阴影离开分子的横纵方向均为5个像素）

2 word-break属性

（1）功能：让文本自动换行

（2）值：normal（使用浏览器默认换行规则）、keep-all（只能在半角空格或连字符处换行）、break-all（允许在单词内换行）

（3）浏览器支持

到目前为止：Safari、Chrome 、IE浏览器支持该属性。

3 word-wrap属性

（1）功能：让长单词和URL地址自动换行。

（2）值：normal（浏览器默认处理）、break-word（在长单词或URL地址内部进行换行）

（3）浏览器支持：所有浏览器。

4 Web Font与@font-face属性

（1）功能：在网页上显示服务器端字体。

（2）使用方法：

@font-face{
 font-famliy：WebFont；
 src：url（‘font/Fontin_Sans_R_45b.otf’） format（“opentype”）；
 font-weitht：normal；
}
h1{
 font-family：WebFont；
}

5 font-size-adjust属性

（1）功能：修改字体种类而保持字体尺寸不变

（2）使用方法：

aspect值（比例值）：可以用来在将字体修改为其他字体时保持字体大小基本不变。（常数）

计算方法：x-height值（使用该字体书写出来的小写X的高度（像素为单位））除以该字体的尺寸。

p{
 font-size：16px；
 font-famliy：Times New Roman；
 font-size-adjust：0.46（aspect值）
}

（3）浏览器对于aspect值的计算方法：

在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后，浏览器对于修改后字体尺寸的计算公式：

c = （a / b）s

a：表示实际使用的字体的aspect值、b：表示修改前字体的aspect值、

s：表示指定的字体尺寸，c：浏览器实际显示时的字体尺寸。

（4）属性值可设为：”none“

等同于不对font-size-adjust属性进行设置，按照字体原来的大小显示。

6 使用rem单位定义字体大小

（1）rem字体尺寸单位根据页面上的根元素（一般指html元素）的字体大小而计算出实际的字体大小，不管元素的父元素的字体大小是多少。

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

（2）浏览器支持:

到目前为止：包括IE9在内，所有浏览器都支持。

（3）兼容IE8及之前版本（不能使用rem字体单位）

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝

热心网友 时间：2022-04-06 11:52

css3新属性：

一、RGBA和透明度

RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。

二、background属性

background-image：设置元素的背景图像。

background-origin：规定背景图片的定位区域。

background-size ：规定背景图片的尺寸。

background-repeat：设置是否及如何重复背景图像。

三、word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注：所有主流浏览器都支持 word-wrap 属性。

基础语法：

word-wrap: normal|break-word;


四、text-shadow属性

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

text-shadow基础语法：

text-shadow： 5px 5px 5px #FF0000;


参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；


五、font-face属性

font-face属性：定义自己的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

六、border-radius属性

border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。

基础语法：

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


注：该属性允许您为元素添加圆角边框！

七、border-image属性

border-image：将图片规定为包围 div 元素的边框

border-image基础语法：

border-image: url(border.png) 30 30 round


八、box-shadow属性

box-shadow属性：向框添加一个或多个阴影。（盒阴影）

box-shadow基础语法：

box-shadow: 10px 10px 5px #888888


九、媒体查询

媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

热心网友 时间：2022-04-06 13:10

- css3 
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框 
border-radius、box-shadow、border-image、 
background-size：规定背景图片的尺寸 
background-origin：规定背景图片的定位区域 
background-clip：规定背景的绘制区域

文本效果（常用） 
text-shadow：设置文字阴影 
word-wrap：强制换行 
word-break 
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换 
transform：向元素应用2/3D转换 
transition：过渡

动画

@keyframes规则： 
animation、animation-name、animation-ration等

用户界面（常用） 
box-sizing、resize 
css3新增伪类 
：nth-child() 
：nth-last-child() 
：only-child 
：last-child 
：nth-of-type() 
：only-of-type() 
：empty 
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 
：enabled 
：disabled 
：checked 
：not