CSS3 浏览器私有化前缀

最新推荐文章于 2021-01-18 17:00:19 发布

houyanhua1

最新推荐文章于 2021-01-18 17:00:19 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79642802

CSS 同时被 3 个专栏收录

65 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

CSS3

33 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现带有线性渐变背景的盒子元素的例子。通过不同浏览器前缀的支持，确保了渐变效果在各种浏览器中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		.box {
			width: 1000px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid #000;
			/* 线性渐变色 */
			background: -webkit-linear-gradient(left,red,blue);  /* -webkit- 谷歌前缀,苹果(safari)前缀 */
			background: -moz-linear-gradient(left,red,blue);    /* -moz- 火狐前缀 */
			background: -ms-linear-gradient(left,red,blue);     /* -ms- 微软ie前缀 */
			background: -o-linear-gradient(left,red,blue);      /* -o- 欧朋前缀 */
			background: linear-gradient(left,red,blue);
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>