web前端入门到实战：CSS3做出条纹大背景

最新推荐文章于 2021-09-15 21:09:50 发布

魔方编程

最新推荐文章于 2021-09-15 21:09:50 发布

阅读量188

点赞数 1

文章标签： css css3 前端 web前端前端开发

本文链接：https://blog.csdn.net/wewfdf/article/details/100856564

版权

本文介绍了使用CSS3创建多种背景样式的方法，包括不等宽条纹、瓷砖条纹、草地、斜条纹、单色透明条纹、格子、波点和棋盘图案。通过调整不同属性，可以实现各种视觉效果，适合前端开发者学习和参考。

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

1、实现不等宽背景条纹

实现如上图所示的效果，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
      .cont{
               width: 500px;    
               height: 200px;      
               background: -webkit-linear-gradient(#78C9DC 70%, #0acfff 0%);
               background: -o-linear-gradient(#78C9DC 70%, #0acfff 0%);
               background: linear-gradient(#78C9DC 70%, #0acfff 0%);     
              background-size: 100%  20px;    
      }
    </style>
    <title>条纹背景</title>
</head>
<body>
    <div class="cont">

    </div>
</body>
</html>

其他效果：

⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补
⑵如果需要等宽切无过渡的渐变，开始和结束值设置为50%即可。
⑶如果想要垂直条纹，你只需要调整background-size的x、y值即可。

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端

2、瓷砖条纹背景

实现如上图所示的效果，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset

最低0.47元/天解锁文章

魔方编程

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫