CSS3兼容性

最新推荐文章于 2022-02-28 18:39:53 发布

 ;

最新推荐文章于 2022-02-28 18:39:53 发布

阅读量860

点赞数

分类专栏： CSS3 文章标签： CSS3 CSS3新功能 CSS兼容

本文链接：https://blog.csdn.net/weixin_42210229/article/details/86656069

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3中受到关注的功能是针对文本或图像的特效。具体的是给文本或者图像加阴影、半透明处理、旋转处理、以及动画效果等。这些特效以前只能通过Flash来实现，现在可以使用CSS3实现。

1、阴影

区域阴影box-shadow属性box-shadow:[inset] {x方向} {y方向} {模糊距离} {阴影颜色}

在“box-shadow”前加上了“-webkit-”这样的字符串，表示代表作为iPhone/iPad/Android等标准浏览器的匹配引擎。“-moz-”表示代表作为在Firefox中运行。第一个参数inset代表在区域内侧进行阴影描绘。

#dom{
    -webkit-box-shadow:inset 1px 1px 1px #ccc;
    -moz-box-shadow:inset 1px 1px 1px #ccc;
}

文本阴影text-shadow属性text-shadow:[inset] {x方向} {y方向} {模糊距离} {阴影颜色}

在text-shadow属性前不需要“-webkit-”前置符

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style type="text/css">
	.shadow{
		width: 200px;
		height: 200px;
		text-align: center;
		padding: 10px;
		font-size: 30px;
		font-weight: 800;
		background-color: lightgray;
		letter-spacing: 2px;
		text-shadow: 2px 2px 2px #111111;;
		-webkit-box-shadow:5px 5px 5px gray;
		-moz-box-shadow:5px 5px 5px gray;
	}
</style>
</head>

<body>
<div class="shadow">
	字符阴影
</div>
</body>
</html>

在目前最新版本的浏览器中box-shadow属性可以忽略“-webkit-”和“-moz-”的前置。

2、颜色的指定

CSS3中除了原来的“#RRGGBB”以及rgb(r,g,b)这两种指定方式外，追加了可指定透明度的rgba(r,g,b,a)方式，以及表示色相/彩度/亮度的hsl(h,s,l)方式与加上透明度的hsla（h,s,l,a）方式。

rgb(红0-255，绿0-255，蓝0-255)

rgba(红0-255，绿0-255，蓝0-255，透明度0-1)

hsl(色相0-360，彩度0-100%，亮度0-100%）

hsla(色相0-360，彩度0-100%，亮度0-100%，透明度0-1)

HSL方式中指定色相、彩度、亮度。色相通过圆形的色相环（0-360度）来决定，其后红色为0，绿色为120，蓝色为240。HSL方式比RGB方式能更直观的进行颜色指定。

3、变形

transform:操作;

**transform属性中可指定的操作**
值的形式	意义
rotate(deg)	旋转（单位deg）
scale(sx[,sy])	向X轴[，Y轴]扩大或缩小（单位倍）
skew(ax[,ay])	向X轴[，Y轴]倾斜（单位deg）
translate(x[,y])	向X轴[,y轴]移动（单位px）
matrix(a,c,b,d,tx,ty)	以矩阵形式指定，与setTransform()方法的参数一样

.rotate{
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

4、动画

**动画相关属性**
属性	意义
animation-duration	动画的持续时间
animation-iteration-count	指定动画的次数（infinite无数次）
animation-name	指定动画名称
animation-timing-function	指定动画的时机

**animation-timing-function属性中可以指定的时机**
值的形式	意义
ease	让开始与结束更平滑
linear	持续
ease-in	慢慢开始
ease-out	慢慢结束
ease-in-out	慢慢开始慢慢结束
cubic-bezier(x1,y1,x2,y2)	通过（x1,y1,x2,y2）指定三次贝塞尔曲线的P1与P2

动画的定义方法使用@keyframes规则。keyframe(关键帧)的单位为“%”。例子：

@-webkit-keyframes 'animal'{
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(90deg);}
    100%{-webkit-transform:rotate(0deg);}
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation动画</title>
<style type="text/css">
	.animel{
		font-size: 64px;
		text-align: center;
		color: red;
		-webkit-animation-name:'rotate1';
		-webkit-animation-duration:5s;
		-webkit-animation-timing-function:ease;
		-webkit-animation-iteration-count:infinite;
	}
	@-webkit-keyframes 'rotate1'{
		0%{-webkit-transform:rotate(0deg);}
		25%{-webkit-transform:rotate(90deg);}
		50%{-webkit-transform:rotate(180deg);}
		75%{-webkit-transform:rotate(270deg);}
		100%{-webkit-transform:rotate(360deg);}
	}
</style>
</head>

<body>
<div class="animel">↑</div>
<div class="animel">▲</div>
</body>
</html>

5、圆角

-webkit-border-radius:像素;

6、渐变效果

在CSS3中创建渐变效果时，在background属性（或background-image属性）中使用gradient()，其语法如同函数一样，在WebKit浏览器以及Mozilla浏览器中语法稍有差别。

▲

//WebKit语法
-webkit-gradient(linear,开始位置，结束位置，from(开始颜色),to(结束颜色));

//Mozilla语法

-moz-linear-gradient(开始位置，开始颜色，结束颜色）;

开始位置可以是top,left,right,bottom，也可以指定度，如-45deg。

▲

使用color-stop()可以实现更复杂的渐变效果

color-stop(位置，颜色)

参数“位置”是将整个渐变区域看做1时，给出的相对值，如开始处为0，结束处为1，中间点为0.5.

Mozilla浏览器中不支持color-stop()语法，但是有替代的方案实现与color-stop()相同的功能。具体如下：

-moz-linear-gradient(开始位置，开始颜色，中间点颜色百分比，结束颜色）；

举个栗子：

box1从左上角开始到右下角，颜色由红色到白色渐变。box2使用color-stop()实现由红到白再到蓝的渐变。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>渐变效果gradient与color-stop</title>
<style type="text/css">
	div{
		margin: 10px;
		width: 300px;
		height: 200px;
/*		圆角，兼容性*/
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
	}
	.box1{
/*		兼容webkit浏览器*/
		background: -webkit-gradient(linear,left top,right bottom,form(red),to(white));
/*		兼容Mozilla浏览器*/
		background:-moz-linear-gradient(-45deg,red,white);
	}
	.box2{
/*		兼容webkit浏览器*/
		background:
			-webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0,red),
				color-stop(0.5,white),
				color-stop(1,blue)
			);
/*		兼容Mozilla浏览器*/
		background:-moz-linear-gradient(top,red,white 50%,blue);
	}
</style>
</head>

<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

7、倒影

box-reflect属性可以实现如湖面倒影般的效果，其语法如下：

-webkit-box-reflect:位置 [距离px -webkit-gradient()];

支持倒影效果的现在只有最新的WebKit浏览器（Chrome及Safari浏览器）

box-reflect属性“位置”处可指定值
值	意义
above	上
below	下
left	左
right	右

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-reflect倒影</title>
<style type="text/css">
	.gbox{
		font-size:64px;
		color: red;
		-webkit-box-reflect:
			below -8px
			-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(255,255,255,0.3)));
	}
</style>
</head>

<body>
<div class="gbox">HTML5</div>
</body>
</html>

Chrome浏览器（左）下与Firefox浏览器（右）下浏览效果：

显然意见此方案Firefox不支持倒影效果

解决方案：https://cloud.tencent.com/developer/article/1023580。在这不再详细解释了

8、多栏目布局

语法如下：

-webkit-column-count:栏目数;

-webkit-column-width:栏目宽度;

-webkit-column-gap:间隔px;

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多栏目布局</title>
<style type="text/css">
	div.box{
		width: 300px;
		padding: 10px;
		font-size: 20px;
		-webit-column-count:2;
		-moz-column-count:2;
		-webkit-column-gap:10px;
		-moz-column-gap:10px;
		border: 2px solid blue;
		outline: 1px solid red;
		outline-offset:3px;
	}
</style>
</head>

<body>
<div class="box">
	web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构
</div>
</body>
</html>

 ;

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3兼容性

CSS3中受到关注的功能是针对文本或图像的特效。具体的是给文本或者图像加阴影、半透明处理、旋转处理、以及动画效果等。这些特效以前只能通过Flash来实现，现在可以使用CSS3实现。1、阴影区域阴影box-shadow属性box-shadow:[inset] {x方向} {y方向} {模糊距离} {阴影颜色}在“box-shadow”前加上了“-webkit-”这样的字符串，表示代表作为...
复制链接

扫一扫