css3渐变之条纹背景

最新推荐文章于 2022-10-25 15:17:23 发布

啊哈前端

最新推荐文章于 2022-10-25 15:17:23 发布

阅读量1.5k

点赞数

分类专栏： css3

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

版权

本文展示了如何使用CSS3的linear-gradient属性创建不同类型的条纹背景，包括两种颜色的横条纹、多颜色横条纹、垂直条纹、45度角斜向条纹以及重复渐变的条纹效果。通过调整角度、颜色和大小，可以实现各种灵活的条纹设计。

摘要由CSDN通过智能技术生成

<!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

最低0.47元/天解锁文章

啊哈前端

关注

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
复制链接

扫一扫