css样式(部分)

CSS3-部分样式

边框:

border-radius:圆角边框,可以写绝对值,也可以写百分比(可以让不同的方向进行改变)

box-shadow:阴影,从左往右,分别为水平偏移方向,垂直偏移方向,模糊半径(阴影大小),扩展半径(变大),最后一个是阴影颜色

box-shadow:0 0 0 0 color(可以使用半透明:ragb(0,0,0,0))

border-image:边框图片

一个class可以引入多个类

背景

background-size:大小

background-origin:规定背景图片的定位区域,从什么地方开始

background-repeat:平铺方式

文本效果

text-shadow:文本阴影,有水平,垂直,模糊三个值,和box-shadow一样,但是少了扩展

字体

字体网站(找字网:zhaozi.cn;)【fontcreator】自己造字体的软件

@font-face:使用自定义字体

font awesome:特殊符号引用地址

2D转换

通过transform来实现。

translate():位移,下面代码表示水平和垂直方向各位移100像素,第一个变量为X轴,第二个变量为Y轴。变换的过程中,位置不变。

transform:trnslate(100px,100px)

rotate():旋转角度,顺时针旋转,deg为旋转的符号

transform:rotate(10deg)

scale():缩放 表示缩放2倍

transform:rotate(10deg) scale(2)

skew:推到,表示在x,Y轴推到45度,可以在X和Y 进行推到斜切

transform:skew(45deg)

matrix():矩阵,一般不用

过渡

transition:属性,移动,从哪儿移动到哪儿

transition-delay

linear:匀速;ease:满加速到匀速最后变慢结束;cubl-bezier:贝塞尔曲线,通过两个锚点对线条进行控制,利用贝塞尔曲线可以模拟各种物体的运动模式。

动画

@keyframes 通过关键帧进行规则

animation 通过属性进行调整(具体可查W3C中css动画)

animation:animation-name:动画名称,后面的name可以修改;

书写解释:属性:名字,时间,方式,次数

​ animatename从哪儿开始,到哪儿结束

书写方法:
animation:animation-name 3s linear 1
@keyframes animatename{
	from{
	
	}
	to{
	
	}
}

第二种方法:
@keyframes animatename{
	0%{
	
	}
	100%{
	
	}
}
上一篇:LInux-用户和用户组


下一篇:Shadow DOM Virtual DOM 异同点