css3渐变之条纹背景

最新推荐文章于 2024-03-05 09:39:29 发布

啊哈前端

最新推荐文章于 2024-03-05 09:39:29 发布

阅读量1.5k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/54139713

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>条纹背景</title>
  <style type="text/css">
	  * {
		box-sizing: border-box;
	  }
	  html,body {
		  
	      width: 100%;
		  height: 100%;
		  _height: 100%;
		  min-height: 100%;
		  margin: 0;
		  padding: 0;
	  }
	  .comm {
		  width: 100%;
		  height: 150px;
		  margin-bottom: 20px;
	  }
	  /* 两种颜色横条纹 */
	  .bg {
	      background: linear-gradient(#fb3 30%, #58a 0);
		  background-size: 100% 30px;
	  }
	  /* 多颜色横条纹 */
	  .bg2 {
		  background: linear-gradient(#fb3 33.3%,#85a 0,#85a 66.6%,yellowgreen 0);
		  background-size: 100% 45px;
	  }
	  /* 垂直条纹(在水平条纹基础上，添加一个额外的参数来指定渐变方向) */
	  .bg3 {
		  background: linear-gradient(to right,/* 或90deg */#fb3 50%, #58a 0);
		  background-size: 30px 100%;
	  }
	  /* 45度角斜向条纹背景 */
	  .bg4 {
		  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
		  background-size: 30px 30px;
	  }
	  /* 重复渐变 */
	  .bg5 {
		  background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
	  }
	  /* 使用重复渐变创建更加灵活的斜向背景，可以是45deg、60deg等 */
	  .bg6 {
	      background: repeating-linear-gradient(30deg,#79b, #79b 15px, #58a 0,#58a 30px);
	  }
  </style>
 </head>
 <body>
	<div class="bg comm"></div>
	<div class="bg2 comm"></div>
	<div class="bg3 comm"></div>
	<div class="bg4 comm"></div>
	<div class="bg5 comm"></div>
	<div class="bg6 comm"></div>
 </body>
</html>

啊哈前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3渐变之条纹背景

条纹背景 * { box-sizing: border-box; } html,body { width: 100%; height: 100%; _height: 100%; min-height: 100%; margin: 0; padding: 0; } .comm { widt
复制链接

扫一扫