首页 > 代码库 > CSS属性

CSS属性

-------------------------------------------动画-------------------------------------------------
animation:name(名字) duration(循环一次时间) timing-function(速度曲线) delay(延迟) iteration-count(循环次数) direction(是否反向播放);
两种方式:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}-
--------------------------------------------背景--------------------------------------------------
background:color(颜色)position(位置)size(大小)repeat(重复)origin(定位区域)clip(绘制区域)attachment(是否固定)image(图片)
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

--------------------------------------------边框--------------------------------------------------
border:边框
outline:(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline:10px solid red;
border-image:将图片规定为包围 div 元素的边框
border-radius:属性设置圆角边框
box-shadow:属性向框添加一个或多个阴影。
box-shadow: 10px 10px 5px #888888;box-shadow: h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊) spread color(颜色) inset;
--------------------------------------------转换属性--------------------------------------------------
transform: 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate() :元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
scale:元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
skew:元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
matrix:方法把所有 2D 转换方法组合在一起。
-------------------------------------------过度属性-------------------------------------------------------
transitiontransition 属性是一个简写属性,用于设置四个过渡属性:property(规定设置过渡效果的 CSS 属性的名称。)duration(过度时间)timing-function(线性速度)delay(延时)

CSS属性