CSS3新添加的属性有哪些

作者 : 开心源码 本文共1724个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共84人阅读

CSS 使用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

CSS3新添加了很多的属性,下面一起来分析一下新添加的少量属性:

1.CSS3边框:

  • border-radius:CSS3圆角边框。在 CSS2 中增加圆角矩形需要技巧,我们必需为每个圆角用不同的图片,在 CSS3 中,创立圆角是非常容易的,在 CSS3 中,border-radius 属性使用于创立圆角。border:2px solid;
  • box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 使用于向方框增加阴影。box-shadow:10px 10px 5px #888888;
  • border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以用图片来创立边框。border-image:url(border.png) 30 30 round;

2.CSS3背景:

  • background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复用背景图片。您能够以像素或者百分比规定尺寸。假如以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
  • background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或者 border-box 区域。

3.CSS3文字效果:

  • text-shadow:在 CSS3 中,text-shadow 可向文本应使用阴影。text-shadow:5px 5px 5px #FFFFFF;
  • word-wrap :单词太长的话即可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

4.CSS3 2D转换:

transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或者拉伸。

  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
  • rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
  • scale():元素的尺寸会添加或者减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
  • skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。
  • matrix() :
  • matrix() 方法把所有 2D 转换方法组合在一起。
  • matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

5.CSS3 3D转换:

  • rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform:rotateX(120deg);
  • rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform:rotateY(120deg);

6.CSS3 过渡:当元素从一种样式变换为另一种样式时为元素增加效果。

7.CSS3动画:通过 CSS3,我们能够创立动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

8.CSS3多列:

  • column-count:属性规定元素应该被分隔的列数。
  • column-gap:属性规定列之间的间隔。
  • column-rule :属性设置列之间的宽度、样式和颜色规则。

9.CSS3使用户界面:

  • resize:属性规定能否可由使用户调整元素尺寸。
  • box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
  • outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
CSS3新添加的属性有哪些

css3’

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS3新添加的属性有哪些

发表回复