搜索到
15
篇与
的结果
-
字体 1. web字体<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>web字体</title> <style> @font-face{ font-family: "方正手迹"; src: url('./font1/方正手迹.ttf'); } @font-face { font-family: "webfont"; font-display: swap; src: url('./font2/webfont.eot'); /* IE9 */ src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font2/webfont.woff2') format('woff2'), url('./font2/webfont.woff') format('woff'), /* chrome、firefox */ url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } .t1 { font-size: 100px; font-family: '方正手迹'; } .t2 { font-size: 100px; font-family: 'webfont'; } </style> </head> <body> <h1 class="t1">春风得意马蹄疾，不信人间有别离</h1> <h1 class="t2">春风得意马蹄疾，不信人间有别离</h1> </body> </html>2. 字体图标—方式一<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式一</title> <style> @font-face { font-family: 'iconfont'; src: url('./font3/iconfont.woff2?t=1704292879544') format('woff2'), url('./font3/iconfont.woff?t=1704292879544') format('woff'), url('./font3/iconfont.ttf?t=1704292879544') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>3. 字体图标—方式二<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二</title> <link rel="stylesheet" href="./font3/iconfont.css"> <style> .iconfont { font-size: 40px; } </style> </head> <body> <span class="iconfont icon-guanzhu"></span> <span class="iconfont icon-fuwuqi"></span> <span class="iconfont icon-gongjizhe"></span> <span class="iconfont icon-shouhaizhe"></span> </body> </html>4. 字体图标—方式三<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式三</title> <script src="./font3/iconfont.js"></script> <style> .icon { width: 3em; height: 3em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanzhu"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fuwuqi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shouhaizhe"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gongjizhe"></use> </svg> </body> </html>5. 字体图标—方式一—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式一_在线使用</title> <style> /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ @font-face { font-family: 'iconfont'; /* Project id 4398201 */ src: url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff2?t=1704293871283') format('woff2'), url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff?t=1704293871283') format('woff'), url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.ttf?t=1704293871283') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>6. 字体图标—方式二—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二_在线使用</title> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.css"> <style> .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>7. 字体图标—方式三—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二_在线使用</title> <script src="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.js"></script> <style> </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanzhu"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fuwuqi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shouhaizhe"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gongjizhe"></use> </svg> </body> </html> -
渐变 1. 线性渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: linear-gradient(red, yellow, green); } .box2 { background-image: linear-gradient(to right top, red, yellow, green); } .box3 { background-image: linear-gradient(20deg, red, yellow, green); } .box4 { background-image: linear-gradient(red 50px, yellow 100px, green 150px); } .box5 { background-image: linear-gradient(20deg, red 50px, yellow 100px, green 150px); font-size: 80px; text-align: center; line-height: 200px; font-weight: bold; color: transparent; background-clip: text; } </style> </head> <body> <div class="box box1">默认情况（从上到下）</div> <div class="box box2">通过关键词调整线性渐变方向</div> <div class="box box3">通过角度调整线性渐变方向</div> <div class="box box4">调整线性渐变的区域</div> <div class="box box5">带带大师兄</div> </body> </html>2. 径向渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>径向渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: radial-gradient(red, yellow, green); } .box2 { background-image: radial-gradient(at right top, red, yellow, green); } .box3 { background-image: radial-gradient(at 100px 50px, red, yellow, green); } .box4 { background-image: radial-gradient(circle, red, yellow, green); } .box5 { background-image: radial-gradient(100px 100px, red, yellow, green); } .box6 { background-image: radial-gradient(red 50px, yellow 100px, green 200px); } .box7 { background-image: radial-gradient(100px 50px at 150px 150px, red 50px, yellow 100px, green 200px); } </style> </head> <body> <div class="box box1">默认情况</div> <div class="box box2">通过关键词调整径向渐变圆的圆心</div> <div class="box box3">通过像素值调整径向渐变圆的圆心</div> <div class="box box4">通过关键字circle调整为正圆</div> <div class="box box5">通过像素值调整为正圆</div> <div class="box box6">调整径向渐变的区域</div> <div class="box box7">综合写法</div> </body> </html>3. 重复渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>重复渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: repeating-linear-gradient(red 50px, yellow 100px, green 150px); } .box2 { background-image: repeating-radial-gradient(red 50px, yellow 100px, green 200px); } </style> </head> <body> <div class="box box1">重复线性渐变</div> <div class="box box2">重复径向渐变</div> </body> </html>
-
新增的文本属性 1. 文本阴影<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本阴影</title> <style> body { background-color: black; } h1 { font-size: 80px; text-align: center; color: white; /* text-shadow: 3px 3px; */ /* text-shadow: 3px 3px red; */ /* text-shadow: 3px 3px 10px red; */ /* text-shadow: 0px 0px 15px black; */ text-shadow: 0px 0px 20px red; font-family: '宋体'; } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>2. 文本换行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本换行</title> <style> div { width: 400px; height: 400px; border: 1px solid black; /* white-space normal：文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值） pre：原样输出（与pre标签的效果相同） pre-wrap：在pre效果的基础上，超出元素边界自动换行 pre-line：在pre效果的基础上，超出元素边界自动换行。且只识别文本中的换行，自动忽略首尾的空格（类似于trim） nowrap：强制不换行 */ white-space: pre-wrap; } </style> </head> <body> <div> 山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君 雪上空留马行处 </div> </body> </html>3. 文本溢出<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本溢出</title> <style> ul { width: 400px; height: 400px; border: 1px solid black; font-size: 20px; list-style: none; padding-left: 0; } li { margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <ul> <li>大数据透视元旦消费新趋势 “冰雪经济”成新增长点</li> <li>图知道｜2024年1月起施行，这些新规值得关注</li> <li>网信部门依法查处花椒直播、天天吉历APP等破坏网络生态案件</li> <li>云南小伙靠直播把烧烤摊变网红店：白天播两小时，晚上门店就是满的</li> <li>2023大国重器上新了这些！最后一个你一定没见过→</li> <li>老照片：1985年昆明</li> </ul> </body> </html>4. 文本修饰<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本修饰</title> <style> h1 { font-size: 100px; /* text-decoration-line: line-through; text-decoration-style: wavy; text-decoration-color: skyblue; */ text-decoration: line-through wavy skyblue; } </style> </head> <body> <h1>孙笑川，又名：带带大师兄</h1> </body> </html>5. 文本描边<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本描边</title> <style> /* 只有webkit内核的浏览器支持 */ h1 { font-size: 100px; /* -webkit-text-stroke-color: red; -webkit-text-stroke-width: 3px; */ -webkit-text-stroke: red 3px; color: transparent; } </style> </head> <body> <h1>先生您好，欢迎光临红浪漫！</h1> </body> </html>
-
新增的边框相关属性 1. 边框圆角<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框圆角</title> <style> div { width: 400px; height: 400px; border: 2px solid black; margin: 0 auto; /* border-radius: 10px; */ /* 正圆 */ /* border-top-left-radius: 100px; border-top-right-radius: 50px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px; */ /* 椭圆 */ /* border-top-left-radius: 100px 50px; border-top-right-radius: 50px 25px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 10px 5px; */ border-radius: 100px 50px 20px 10px / 50px 25px 10px 5px; } </style> </head> <body> <div></div> </body> </html>2. 边框的外轮廓<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框的外轮廓</title> <style> .box1 { width: 400px; height: 400px; padding: 10px; border: 5px solid black; background-color: gray; margin: 0 auto; margin-top: 100px; /* outline-width: 20px; outline-color: orange; outline-style: solid; outline-offset: 0px; */ /* outline-offset不是outline的子属性 */ outline: 20px orange solid; } </style> </head> <body> <div class="box1"></div> </body> </html>
-
新增的背景相关的属性 1. background-origin<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-origin</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg01.jpg'); background-repeat: no-repeat; /* padding-box：从padding区域开始显示背景图（默认值） border-box：从border区域开始显示背景图 content-box：从content区域开始显示背景图 */ background-origin: content-box; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>2. background-clip<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-clip</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 120px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); color: transparent; background-image: url('../images/bg02.jpg'); background-repeat: no-repeat; background-origin: border-box; /* padding-box：从padding区域开始向外裁剪背景（默认值） border-box：从border区域开始向外裁剪背景 content-box：从content区域开始向外裁剪背景 text：背景图只呈现在文字上 */ background-clip: text; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>3. background-size<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-size</title> <style> div { width: 400px; height: 400px; border: 1px solid black; background-image: url('../images/bg03.jpg'); /* 手动设置 */ /* background-size: 400px 400px; */ /* 按百分比设置 */ /* background-size: 100%; */ /* 将背景图等比例缩放，使其的宽或高（看谁最大），与容器的宽或高相等， 再将完整图片包含在容器内（可能显示不全） */ /* background-size: contain; */ /* 将背景图等比例缩放，直到完全覆盖容器， 图片会尽可能全的显示在元素上（可能显示不全）优先选择该属性 */ background-size: cover; } </style> </head> <body> <div></div> </body> </html>4. background复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background复合属性</title> <style> .box1 { width: 400px; height: 400px; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); /* background: 背景颜色 url 是否重复 位置 / 大小 原点 裁剪方式 */ background: skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px content-box; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>5. 多背景图<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多背景图</title> <style> div { width: 400px; height: 400px; border: 1px solid black; background: url('../images/bg-lt.png') no-repeat left top, url('../images/bg-rt.png') no-repeat right top, url('../images/bg-lb.png') no-repeat left bottom, url('../images/bg-rb.png') no-repeat right bottom; } </style> </head> <body> <div></div> </body> </html>
-
新增的盒子模型相关的属性 1. box-sizing<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>box-sizing</title> <style> /* box-sizing 怪异盒模型 content-box：width和height设置的是盒子内容区的大小（默认值） border-box：width和height设置的是盒子总大小（怪异盒模型） */ .box1 { width: 200px; height: 200px; background-color: skyblue; padding: 5px; border: 1px solid black; margin-bottom: 20px; } .box2 { width: 200px; height: 200px; background-color: gray; padding: 5px; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>2. resize<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>resize</title> <style> /* resize 调整盒子大小 none：不允许用户调整大小（默认值） both：可以调节元素的高度和宽度 horizontal：可以调节元素的宽度 vertical：可以调节元素的高度 */ .box1 { width: 400px; height: 200px; background-color: skyblue; resize: h; overflow: scroll; } .box2 { width: 800px; height: 600px; background-color: orange; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>3. box-shadow<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <style> .box1 { width: 400px; height: 400px; background-color: orange; margin: auto; margin-top: 100px; font-size: 40px; /* 写两个值：水平位置 垂直位置 */ /* box-shadow: 10px 10px; */ /* 写三个值：水平位置 垂直位置 阴影颜色 */ /* box-shadow: 10px 10px blue; */ /* 写三个值：水平位置 垂直位置 阴影模糊程度 */ /* box-shadow: 10px 10px 10px; */ /* 写四个值：水平位置 垂直位置 阴影模糊程度 阴影颜色 */ /* box-shadow: 10px 10px 20px blue; */ /* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 */ /* box-shadow: 10px 10px 20px 10px blue; */ /* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 内阴影*/ /* box-shadow: 10px 10px 20px 10px blue inset; */ /* box-shadow: 0px 0px 50px red inset; */ position: relative; top: 0; left: 0; transition: 0.3s linear all; } .box1:hover { box-shadow: 0px 0px 20px red; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>4. opacity<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> .box1 { width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.2; } .box2 { position: relative; width: 400px; } h1 { position: absolute; top: 100px; left: 0; background-color: black; color: white; width: 100%; line-height: 100px; text-align: center; opacity: 0.5; } </style> </head> <body> <div class="box1">带带大师兄</div> <div class="box2"> <img src="../images/你瞅啥.jpg" alt=""> <h1>你瞅啥</h1> </div> </body> </html>
-
新增的长度单位 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新增的长度单位</title> <style> * { margin: 0; padding: 0; } .box1 { height: 200px; width: 200px; background-color: skyblue; } .box2 { /* 视口高度的百分之20 */ height: 20vh; /* 视口宽度的百分之20 */ width: 20vw; background-color: green; } .box3 { height: 20vmax; width: 20vmax; background-color: orange; } </style> </head> <body> <div class="box1">像素</div> <div class="box2">vw和vh</div> <div class="box3">vmax和vmin</div> </body> </html>
