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

最新推荐文章于 2024-07-26 08:00:00 发布

魔方编程

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量171

点赞数 1

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

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

版权

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
评论
web前端入门到实战：CSS3做出条纹大背景

1、实现不等宽背景条纹实现如上图所示的效果，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> .cont{ width: 500px; ...
复制链接

扫一扫