- A+
所属分类：Web前端
背景颜色与裁切使用：
<!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>
