欢迎光临
我的个人博客网站

CSS 3 背景与渐变应用技巧 -cyy

背景颜色与裁切使用:

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

 

背景重复与滚动:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }          div{            width:600px;            height:300px;            overflow:auto;            border:1px solid;          }         article{             width:600px;             height:1000px;             border:10px dashed red;             background-color:pink;             padding:10px;             background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);             /* background-repeat:no-repeat; */             /* background-repeat:repeat-x;             background-repeat:repeat-y; */             /* 平均分布 */             background-repeat:space;             background-attachment:fixed;         }     </style> </head> <body>     <div>         <article>             层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。         </article>     </div> </body> </html>

 

背景重复与尺寸定制:

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

 

多图定义与组合语句:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         article{             width:600px;             height:1000px;             border:10px dashed red;             background-color:pink;             padding:10px;             /* 定义多图 */             /* 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);             background-position:left top,300px 300px;             background-repeat:no-repeat,repeat-y; */              /* 简写 */             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;             background-size:100px auto;         }     </style> </head> <body>         <article>             层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。         </article> </body> </html>

 

盒子阴影使用方法:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:100px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             background-color:pink;             /* box-shadow:10px 10px rgba(0,0,.5); */             box-shadow:0 0 5px rgba(100,100,100,.3);         }     </style> </head> <body>     <div>cyy</div> </body> </html>

 

元素背景渐变色使用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         body{             padding:10px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             background:linear-gradient(pink,orange,lightblue);             background:linear-gradient(45deg,pink,orange,lightblue);             background:linear-gradient(to left,pink,orange,lightblue);             background:linear-gradient(to right bottom,pink,orange,lightblue);                      }         nav{             width:300px;             height:50px;             background:linear-gradient(pink,#e49da9,pink);         }     </style> </head> <body>     <div>cyy</div>     <nav>导航条</nav> </body> </html>

 

径向渐变的使用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         body{             padding:10px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             background:radial-gradient(pink,orange,lightblue);             background:radial-gradient(100px 200px,pink,orange,lightblue);             background:radial-gradient(100px 200px,at left center,pink,orange,lightblue);             background:radial-gradient(at left center,pink,orange,lightblue);             background:radial-gradient(at 50% 0%,pink,orange,lightblue);         }     </style> </head> <body>     <div>cyy</div> </body> </html>

 

镜像标识位绘制小太阳:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         body{             padding:10px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             background:linear-gradient(pink 40%,orange 60%,lightblue 80%);             /* 小太阳 */             background:radial-gradient(red,yellow 30%,black 70%,black 100%);         }     </style> </head> <body>     <div>cyy</div> </body> </html>

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         body{             padding:10px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             /* 设置中间值 */             background:linear-gradient(90deg,pink,40%,lightblue);         }     </style> </head> <body>     <div>cyy</div> </body> </html>

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         body{             padding:10px;         }         div{             width:300px;             height:300px;             border:3px solid #ddd;             /* 重复线性渐变 */             background:repeating-linear-gradient(90deg,pink,25px,yellow 25px,25px,lightblue 50px);         }         aside{             width:300px;             height:300px;             border:3px solid #ddd;             background:repeating-radial-gradient(pink,lightblue 20%,pink 60%);         }     </style> </head> <body>     <div>cyy</div>     <aside></aside> </body> </html>

 

CSS 3 背景与渐变应用技巧 -cyy

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS 3 背景与渐变应用技巧 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏