淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3是web前端开发中最常用的技术之一。其中的原生函数可以大大增强我们的样式效果,下面来介绍几种常用的CSS3原生函数。

transform:rotate()

该函数主要用于旋转元素。语法如下:

transform:rotate(角度);

其中角度可以为正数或负数,表示顺时针或逆时针旋转。例如:

transform:rotate(45deg);

表示顺时针旋转45度。

linear-gradient()

该函数用于生成线性渐变背景色。语法如下:

background:linear-gradient(方向, 起点颜色, 终点颜色);

其中方向可以是to left、to right、to top或to bottom,表示从左到右、从右到左、从上到下或从下到上渐变。

box-shadow()

该函数用于添加元素的投影效果。语法如下:

box-shadow:水平偏移量 垂直偏移量 阴影模糊半径 阴影扩散半径 阴影颜色

例如:

box-shadow:2px 2px 5px 1px rgba(0,0,0,0.6);

表示投影向右下角偏移2px,阴影模糊半径为5px,阴影扩散半径为1px,阴影颜色为rgba(0,0,0,0.6)。

transition()

该函数用于添加过渡效果。语法如下:

transition:属性名称 过渡时间 过渡效果

其中属性名称表示过渡的属性,比如background-color、opacity等。过渡时间可以是秒数或毫秒数,过渡效果可以是ease、linear、ease-in等。

例如:

transition:width 1s ease-in;

表示width属性过渡时间为1秒,过渡效果为ease-in。