您现在的位置是：网站首页> 编程资料编程资料

CSS3制作酷炫的条纹背景CSS3条纹背景制作的实战攻略

2023-10-20 219人已围观

简介 这篇文章主要介绍了CSS3制作酷炫的条纹背景的相关资料,需要的朋友可以参考下

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

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

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

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

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

2.瓷砖条纹背景

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

3. 草地背景

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

4. 斜条纹背景

 .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）

 .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. 格子衫背景

 .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.波点背景

 .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.棋盘背景

 .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制作酷炫的条纹背景，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：css3实现文字扫光渐变动画效果的示例CSS3下的渐变文字效果实现示例css 进度条的文字根据进度渐变的示例代码CSS3文字背景色渐变过渡特效源码CSS实现文字高光水波渐变的动态效果实例一款纯css3实现的颜色渐变按钮的代码教程使用CSS3的背景渐变Text Gradient 创建文字颜色渐变CSS 网页文字渐变效果css实现文字颜色渐变的三种方法

下一篇：浅谈styled-components的用法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网