经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS 3 背景与渐变应用技巧 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:35　　对本文有异议

背景颜色与裁切使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  15.         article{
  16.             width:300px;
  17.             height:300px;
  18.             border:10px dashed red;
  19.             background-color:pink;
  20.             padding:10px;
  21.             /* background-clip:content-box; */
  22.             /* background-clip:padding-box; */
  23.             background-clip:border-box; /* 默认效果 */
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.  
  29.     <article>
  30.         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  31.     </article>
  32. </body>
  33. </html>

 

背景重复与滚动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  15.         div{
  16.            width:600px;
  17.            height:300px;
  18.            overflow:auto;
  19.            border:1px solid; 
  20.         }
  21.         article{
  22.             width:600px;
  23.             height:1000px;
  24.             border:10px dashed red;
  25.             background-color:pink;
  26.             padding:10px;
  27.             background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
  28.             /* background-repeat:no-repeat; */
  29.             /* background-repeat:repeat-x;
  30.             background-repeat:repeat-y; */
  31.             /* 平均分布 */
  32.             background-repeat:space;
  33.             background-attachment:fixed;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div>
  39.         <article>
  40.             层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  41.         </article>
  42.     </div>
  43. </body>
  44. </html>

 

背景重复与尺寸定制：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             width:600px;
  16.             height:1000px;
  17.             border:10px dashed red;
  18.             background-color:pink;
  19.             padding:10px;
  20.             background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
  21.             background-repeat:no-repeat;
  22.             /* 改变背景图片的位置 */
  23.             /* background-position:10px 40%; */
  24.             /* 修改背景图片的尺寸 */
  25.             background-size:600px auto;
  26.             background-size:cover;
  27.             background-size:contain;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.         <article>
  33.             层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  34.         </article>
  35. </body>
  36. </html>

 

多图定义与组合语句：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             width:600px;
  16.             height:1000px;
  17.             border:10px dashed red;
  18.             background-color:pink;
  19.             padding:10px;
  20.             /* 定义多图 */
  21.             /* background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg),url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1861627709,1630773149&fm=26&gp=0.jpg);
  22.             background-position:left top,300px 300px;
  23.             background-repeat:no-repeat,repeat-y; */
  24.  
  25.             /* 简写 */
  26.             background:pink url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604759832058&di=80459d54e5128f3cb92272d539928f46&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F07%2F20190207111026_QQMLz.thumb.700_0.jpeg) no-repeat center;
  27.             background-size:100px auto;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.         <article>
  33.             层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  34.         </article>
  35. </body>
  36. </html>

 

盒子阴影使用方法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:100px;
  13.         }
  14.         div{
  15.             width:300px;
  16.             height:300px;
  17.             border:3px solid #ddd;
  18.             background-color:pink;
  19.             /* box-shadow:10px 10px rgba(0,0,.5); */
  20.             box-shadow:0 0 5px rgba(100,100,100,.3);
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div>cyy</div>
  26. </body>
  27. </html>

 

元素背景渐变色使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             padding:10px;
  16.         }
  17.         div{
  18.             width:300px;
  19.             height:300px;
  20.             border:3px solid #ddd;
  21.             background:linear-gradient(pink,orange,lightblue);
  22.             background:linear-gradient(45deg,pink,orange,lightblue);
  23.             background:linear-gradient(to left,pink,orange,lightblue);
  24.             background:linear-gradient(to right bottom,pink,orange,lightblue);
  25.             
  26.         }
  27.         nav{
  28.             width:300px;
  29.             height:50px;
  30.             background:linear-gradient(pink,#e49da9,pink);
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div>cyy</div>
  36.     <nav>导航条</nav>
  37. </body>
  38. </html>

 

径向渐变的使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             padding:10px;
  16.         }
  17.         div{
  18.             width:300px;
  19.             height:300px;
  20.             border:3px solid #ddd;
  21.             background:radial-gradient(pink,orange,lightblue);
  22.             background:radial-gradient(100px 200px,pink,orange,lightblue);
  23.             background:radial-gradient(100px 200px,at left center,pink,orange,lightblue);
  24.             background:radial-gradient(at left center,pink,orange,lightblue);
  25.             background:radial-gradient(at 50% 0%,pink,orange,lightblue);
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div>cyy</div>
  31. </body>
  32. </html>

 

镜像标识位绘制小太阳：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             padding:10px;
  16.         }
  17.         div{
  18.             width:300px;
  19.             height:300px;
  20.             border:3px solid #ddd;
  21.             background:linear-gradient(pink 40%,orange 60%,lightblue 80%);
  22.             /* 小太阳 */
  23.             background:radial-gradient(red,yellow 30%,black 70%,black 100%);
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div>cyy</div>
  29. </body>
  30. </html>

 

颜色渐变中间阈值使用技巧：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             padding:10px;
  16.         }
  17.         div{
  18.             width:300px;
  19.             height:300px;
  20.             border:3px solid #ddd;
  21.             /* 设置中间值 */
  22.             background:linear-gradient(90deg,pink,40%,lightblue);
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div>cyy</div>
  28. </body>
  29. </html>

 

使用渐变重复绘制网站进度条：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             padding:10px;
  16.         }
  17.         div{
  18.             width:300px;
  19.             height:300px;
  20.             border:3px solid #ddd;
  21.             /* 重复线性渐变 */
  22.             background:repeating-linear-gradient(90deg,pink,25px,yellow 25px,25px,lightblue 50px);
  23.         }
  24.         aside{
  25.             width:300px;
  26.             height:300px;
  27.             border:3px solid #ddd;
  28.             background:repeating-radial-gradient(pink,lightblue 20%,pink 60%);
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div>cyy</div>
  34.     <aside></aside>
  35. </body>
  36. </html>

 

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13942253.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号