CSS3制作酷炫的条纹背景


Posted in HTML / CSS onNovember 09, 2017

1. 实现不等宽背景条纹:

CSS3制作酷炫的条纹背景

.cont{
width: 500px;
height: 200px;
background: linear-gradient(#78C9DB 70%,#0acf00 0%);
background-size: 100%  20px;
}

如果想设置等宽的渐变只需要将开始值和结束值改为互补

如果你需要等宽切无过渡的渐变,开始和结束值设置为50%即可。

如果你想要垂直条纹,你只需要调整background-size的x、y值即可。

2.瓷砖条纹背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(45deg,#78C9DB 50%,#0acf00 50%);
background-size:30px 30px;
}

3. 草地背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);
background-size:30px 100%;
}

4. 斜条纹背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 25%,#78C9DB 0,#78C9DB 50%,#0acf00 0,#0acf00 75%,#78C9DB 0);
/*background:repeating-linear-gradient(-45deg,#0acf00,#0acf00 15px,#78C9DB 0,#78C9DB 30px);*/效果相同 
background-size: 30px 30px;
}

5.单色斜条纹背景(利用透明度及transparent)

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);
}

6. 格子衫背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:#fff;
background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}

7.波点背景

CSS3制作酷炫的条纹背景

.cont{
margin:50px;
width:500px;
height:200px;
background:#a95f44;
background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
background-size:20px 20px;
background-position:0 0,10px 10px;  // 必须是background-size尺寸的1/2
}

8.棋盘背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background: #fff;
background-image:linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44  0),
linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
}

总结

以上所述是小编给大家介绍的CSS3制作酷炫的条纹背景,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 #HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 #HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
You might like
php 分库分表hash算法
2009/11/12 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
javascript学习网址备忘
2007/05/29 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Python 字符串操作方法大全
2014/03/11 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
django实现日志按日期分割
2020/05/21 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
应届生煤化工求职信
2013/10/21 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL