css3一些好玩的属性

1、文字阴影:

text-shadow: 1px 2px 3px red;

1px 水平偏移量

2px 垂直的偏移量

3px 阴影的模糊度

red 颜色

2、设置盒子阴影

box-shadow: 2px 3px 4px red,

2px 水平偏移量

3px 垂直的偏移量

4px 阴影的模糊度

red 颜色

如果设置内阴影:

inset 5px 6px 7px blue;

3、盒子内减

box-sizing: content-box| border-box

默认值是 content-box;

border-box 设置盒子的内减

4、过渡

transition:all 2s linear 1s

第一个-property属性:要参与的动画属性,all表示所有的

第二个-duration属性:动画执行时间,

第三个-timing-functions属性:动画类型 linear匀速

第四个-delay属性:动画延时执行的时间

需要配合 hover来使用

5、transform

transform:

1)位移

transform: translate(30px, 50px) 30px X 轴 50px Y轴

移动的距离相对元素自己本身,可以设置百分比,相对元素自己。

2)旋转

transform: rotate(-90deg);

旋转角度如果为正数,按顺时针旋转,否则按逆时针旋转。

3)缩放

transform: scale (0.5, 2);

如果设置的值大于1 放大的效果,如果是一个小数 缩小的效果,不能设置负数

4)倾斜

transform: skew (30deg,30deg);

第一个值代表y轴倾斜,第二个值代表X轴倾斜

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容