搜索到
10
篇与
的结果
-
字体 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>
