CSS3新增属性

最新推荐文章于 2024-05-08 22:33:14 发布

Haytham_Chou

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量308

点赞数

分类专栏： CSS 文章标签： CSS3

本文链接：https://blog.csdn.net/Haytham_Chou/article/details/84070507

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. CSS3边框

border-radius：CSS3圆角边框。在CSS2中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片。在CSS中，创建圆角是非常容易的，在CSS3中border-radius属性用于创建圆角。border: 2px solid;
box-shadow：CSS3边框阴影。在CSS3中，box-shadow用于向方框添加阴影。box-shadow: 10px 10px 5px #ccc;
border-image：CSS3边框图片。通过CSS3的border-iamge属性，您可以使用图片来创建边框。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 #ccc;
word-warp：单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行。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(45deg);值rotate(454deg)把元素顺时针旋转45度。
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 过渡

transition 允许CSS的属性值在一定的时间区间内平滑的过渡，在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动化效果改变CSS的属性值。
兼容性：IE10+、Firefox16+、Safari6.1+、Opera12.1+

transition-property：检索或设置对象中的参与过渡的属性。
transition-property: none | all | property;
参数说明：
- none：没有属性改变
- all：所有属性改变(默认值)
- property：元素属性名称
transition-duration：检索或设置对象过渡持续时间。
transition-duration: time;
参数说明：
- 规定完成过渡效果需要花费的时间（以秒或毫秒计算）
- 默认值是0
transition-timing-function：检索或设置对象中过度的动画类型。
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [start | end]]?) | cubic-bezier(<number>, <number>, <number>)
参数说明：
- linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)匀速运动
- ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 0.1)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start：等同于steps(1, start)
- step-end：等同于steps(1, end)
- steps(<integer>[, [start | end]]?)：接受两个参数的步进函数
  第一个参数：必须为正整数，指定函数(指函数的步数，有多少步来完成)
  第二个参数：取值可以是start或end，指定每一步的值发生变换的时间点(可选，默认值end)
transition-delay：检索或设置对象延迟过度的时间
transition-delay: time;
参数说明：
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值0
transition简写
- 复合属性，检索或设置对象变换时的过度。
- transition: property duration timing-function delay;