前端之美化页面二

CSS3

一、基本样式

1、盒子翻转

transform:rotate(30deg); //盒子翻转30度

2、边框圆角样式

 border-radius: 25px; //圆角弧度为25

3、盒子阴影

	box-shadow: h-offset v-offset blur spread color inset;

	h-offset（水平偏移量）：定义阴影沿水平方向的偏移距离，可以为负值。
v-offset（垂直偏移量）：定义阴影沿垂直方向的偏移距离，同样可以为负值。
	blur（模糊半径）：定义阴影的模糊程度。数值越大，阴影的边缘就越模糊。
	spread（扩展半径）：如果提供了正值，那么阴影会比元素边界扩大；如果提供的是负值，则阴影会收缩。
	color：可选，阴影的颜色，可以是任意有效的 CSS 颜色值。
	inset：可选关键字，表示内部阴影。如果不指定，则默认为外部阴影。当使用 inset 关键字时，阴影将在元素的内部而非外部生成。

4、边界图片

border-image: [source || slice] [/ fill] [ / stretch | repeat | round | space];

source（可省略 source 关键字）：设置边框图片的 URL 或渐变
slice（可省略 slice 关键字）：定义如何将边框图片切分成九个区域，并指定每一边的内侧边界的偏移量。值通常成对给出（上/下、左/右），也可以单个给出一个值代表所有方向。
width（在 / 后面，可省略 fill 关键字）：
stretch：拉伸图像以填满整个边框区域（可能失真）。
repeat：平铺图像以填满边框，类似背景图的 repeat 方式。
round：按需裁剪图像以便每个边框段都是完整图像的一部分。
space：在保持图像不变形的情况下平均分配空白空间来填充边框区域。

需要注意的是，在实际应用中，并不是所有的浏览器都支持这个属性，因此可能需要添加前缀（如 -webkit-、-moz- 等）以确保跨浏览器兼容性。

5、背景

background-image:用于设置元素的背景图片
	URL（指向图像文件,可以设置多个背景）：
					background-position:控制背景图像在元素内显示位置.
					background-repeat:控制背景图像的重复方式.
	关键字 none 表示无背景图像.
	CSS渐变，如线性渐变（linear-gradient()）或径向渐变（radial-gradient()）
	图像生成器函数，例如 element()、image() 或 conic-gradient() 等.

background-size:定义背景图像的大小。
		具体的像素值、百分比、关键字 contain 或 cover 来控制背景图像如何适应其容器。

background-origin:确定背景图像定位的起始点，即背景图像应从元素的哪个区域开始绘制.
	border-box：背景图像从边框区域开始绘制，即使边框透明也能看到背景图像的一部分。
	padding-box：背景图像从内填充区域开始绘制，不包括边框。
	content-box：背景图像从内容区域开始绘制，不包括边框和内填充

background-clip:指定了背景（包括颜色和图像）在元素的哪些部分可见。
	border-box：背景延伸至边框边缘，但不包括边框本身。
	padding-box：背景只延伸至内填充边缘，不包括边框。
	content-box：背景仅限于内容区域内部，不包括边框和内填充。
	text（CSS3新增）：背景仅限于文字内容区域。

6、渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);创建一个渐变背景图像。这个声明允许你指定一种颜色过渡效果，从一种颜色平滑地变化到另一种颜色（或更多颜色）。

linear-gradient: 表示使用线性渐变作为背景图像类型。
radial-gradient: 表示使用径向渐变作为背景图像类型。

direction: 指定渐变的方向。可以是角度值（如 45deg 表示从左上到右下 45 度角的渐变），或者是预定义的关键字，例如 to right、to bottom right 等，表示从某个方向到另一个方向的渐变。

color-stop1, color-stop2, ...：定义了渐变中的颜色停靠点和它们的位置。颜色停靠点是颜色发生改变的地方，你可以指定颜色（如 red、#ff0000、rgb(255, 0, 0)）以及可选的停止位置（如 red 20%，表示红色在渐变的 20% 处开始）。如果没有指定位置，则均匀分布在渐变路径上。

7、2D转换

transform: ;
		translate() //盒子移动
		rotate()  //盒子逆时针旋转
		scale()  //盒子放大
		skew()  //盒子倾斜
		matrix()  //包含旋转，缩放，移动（平移）和倾斜功能，将功能合并成一个.

8、3D转换

transform: ;
	rotateX() //X轴旋转
	rotateY() //Y轴旋转
	rotatez() //Y轴旋转

9、过渡

//单项
transition: transform 2s;
动画的转换时间

//多项
transition: width 2s, height 2s, transform 2s;
 添加宽度，高度和转换时间

10、动画

//方法一
@keyframes 方法名{
    from{background: red;}
    to{background: yellow;}
}

//方法二
@keyframes 方法名{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

需要搭配animation使用，包含六种元素:
		name：定义了应用到该元素的关键帧动画的名称。
		duration：设置动画完成一个周期所需要的时间。
		function：决定动画的速度曲线，即动画在不同时间段内的变化速度。
		delay：指定动画开始之前的延迟时间。
		count：定义动画播放的次数,可以是整数值、无限次（infinite），或者小数（仅部分浏览器支持）。
		direction：控制动画是否应该正常播放（normal，默认值，每次迭代从头开始播放至结束）或反向播放（reverse）等。
		mode：虽然通常不计入“六个元素”之内，但在实际应用中也很重要。定义了动画在执行前（animation-delay阶段）与结束后应该如何展示样式，

学习CSS3好用的网站:www.runoob.com