2023-11-06 16:05:27 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >
css奇技淫巧
< / title >
< meta name = "description" content = "" >
< meta name = "keywords" content = "" >
< meta name = "author" content = "Mozzie" >
2024-03-15 15:38:52 +08:00
< link rel = "canonical" href = "https://maxshader.com/posts/20942/" >
2023-11-06 16:05:27 +08:00
< link rel = "icon" type = "image/svg" href = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>' >
2023-12-28 11:27:53 +08:00
< link rel = "stylesheet" href = "/css/b4c95347.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< script > window . i18n = { "tip-status-done" : "完成" , "tip-status-default" : "全部" , "tip-status-todo" : "计划" , "tip-status-doing" : "进行" , "tip-status-other" : "其他" , "text-select" : "选择" , "text-move" : "移动" , "text-esc" : "退出" , "January" : "一月" , "February" : "二月" , "March" : "三月" , "April" : "四月" , "May" : "五月" , "June" : "六月" , "July" : "七月" , "August" : "八月" , "September" : "九月" , "October" : "十月" , "November" : "十一月" , "December" : "十二月" } < / script >
< meta name = "generator" content = "Hexo 7.0.0" > < / head >
2023-11-06 16:05:27 +08:00
< body id = "app" >
2023-12-25 16:39:03 +08:00
< aside id = "aside-box" class = "left-aside" >
< div class = "header" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/61875ce9.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< div class = "profile" >
< a class = "badge" href = "/" >
< span > Hi< / span >
2023-11-06 16:05:27 +08:00
< span > Mozzie< / span >
< / a >
2023-12-25 16:39:03 +08:00
< cosy-tooltip id = "left-aside-button" placement = "right" >
< span slot = "content" >
< span > 显示 / 隐藏 左侧导航< / span >
< cosy-short-key > [< / cosy-short-key >
< / span >
< cosy-icon >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M16 4c1.104-.019 2 .896 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm1 2a1 1 0 0 0-1-1h-2.995v10H16a1 1 0 0 0 1-1V6zm-4.995 9V5H4.001a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8.004z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
2023-11-06 16:05:27 +08:00
< / div >
2024-04-05 11:14:12 +08:00
< script src = "/js/69622cae.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< cosy-search id = "post-search" placeholder = "搜索" >
< div slot = "short-key" >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > K< / cosy-short-key >
2023-11-06 16:05:27 +08:00
< / div >
2023-12-25 16:39:03 +08:00
< / cosy-search >
2023-11-06 16:05:27 +08:00
< script >
window.algolia = {
appId: "5DTW808BZ8",
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
}
< / script >
2024-04-05 11:14:12 +08:00
< script src = "/js/0a6f193b.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< / div >
< div class = "aside-category" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/db04a759.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< nav class = "category-nav cosy-scrollbar" >
< ul > < li data-path = "archives" >
2023-11-10 13:44:10 +08:00
< a href = "/archives" >
2023-12-25 16:39:03 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M3.5 3A1.5 1.5 0 0 0 2 4.5v4A1.5 1.5 0 0 0 3.5 10h9A1.5 1.5 0 0 0 14 8.5v-4A1.5 1.5 0 0 0 12.5 3h-9zM3 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm.5 6.5A1.5 1.5 0 0 0 2 12.5v4A1.5 1.5 0 0 0 3.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-4a1.5 1.5 0 0 0-1.5-1.5h-9zM3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm14-.063a2.003 2.003 0 0 1-2.5-1.937A2 2 0 0 1 16 8.563a2.005 2.005 0 0 1 1 0a2 2 0 0 1 0 3.874zM16.5 3a.5.5 0 0 1 .5.5v4.041a3.02 3.02 0 0 0-1 0V3.5a.5.5 0 0 1 .5-.5zm0 10.5c-.17 0-.337-.014-.5-.041V17.5a.5.5 0 0 0 1 0v-4.041c-.163.027-.33.041-.5.041z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 归档< / div >
< / a >
< / li > < li data-path = "cosy-roadmap" >
< a href = "/cosy-roadmap" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M9.384 2a1 1 0 0 0-.966.742L4.616 17H2.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-2.116L11.582 2.742A1 1 0 0 0 10.616 2H9.384zM5.651 17l.8-3H11.5a.5.5 0 0 0 0-1H6.717l.534-2H10.5a.5.5 0 0 0 0-1H7.517l1.867-7h1.232l3.733 14H5.651z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 路线图< / div >
< / a >
< / li > < li data-path = "cosy-resume" >
< a href = "/cosy-resume" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M8.5 4.498a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0zm1.5-2.5a2.5 2.5 0 0 0-2.43 3.086L5.471 4.15a1.761 1.761 0 0 0-2.317.88c-.4.882-.008 1.917.877 2.31L7 8.662v2.287l-1.877 4.645a1.75 1.75 0 0 0 3.245 1.311l1.556-3.849a.073.073 0 0 1 .028-.038a.086.086 0 0 1 .046-.012c.02 0 .035.005.046.012a.074.074 0 0 1 .028.038l1.555 3.849a1.75 1.75 0 0 0 3.245-1.311L13 10.96V8.662l2.968-1.322a1.74 1.74 0 0 0 .877-2.31a1.761 1.761 0 0 0-2.317-.88l-2.097.934a2.5 2.5 0 0 0-2.43-3.086zM4.065 5.444a.761.761 0 0 1 1-.38l3.918 1.744a2.5 2.5 0 0 0 2.034 0l3.918-1.744a.761.761 0 0 1 1 .38a.739.739 0 0 1-.373.983l-2.969 1.321a1 1 0 0 0-.593.914v2.298a1 1 0 0 0 .073.375l1.872 4.633a.75.75 0 0 1-1.39.562l-1.556-3.849c-.364-.9-1.639-.9-2.003 0l-1.555 3.85a.75.75 0 1 1-1.39-.562l1.876-4.646A1 1 0 0 0 8 10.95V8.662a1 1 0 0 0-.593-.914L4.438 6.427a.739.739 0 0 1-.373-.983z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 简历< / div >
< / a >
2023-11-10 13:44:10 +08:00
< / li > < / ul >
2024-03-28 11:14:49 +08:00
< ul > < li class = "" >
< a href = "/categories/AI/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M6.13 2.793A3.91 3.91 0 0 1 8.5 2a1.757 1.757 0 0 1 1.5.78A1.757 1.757 0 0 1 11.5 2a3.91 3.91 0 0 1 2.37.793c.525.408.93.973 1.073 1.656c.328.025.628.161.88.366c.382.31.66.775.835 1.267c.274.765.348 1.74.064 2.57c.072.034.143.074.212.12c.275.183.484.445.638.754c.303.605.428 1.449.428 2.474c0 1.141-.435 1.907-.987 2.38a2.68 2.68 0 0 1-1.054.555c-.1.558-.38 1.204-.819 1.752C14.57 17.402 13.686 18 12.5 18c-.94 0-1.688-.52-2.174-1.03a4.252 4.252 0 0 1-.326-.385a4.245 4.245 0 0 1-.326.385C9.188 17.48 8.441 18 7.5 18c-1.186 0-2.069-.598-2.64-1.313a4.057 4.057 0 0 1-.819-1.752a2.68 2.68 0 0 1-1.054-.555C2.435 13.907 2 13.14 2 12c0-1.025.126-1.87.428-2.474c.154-.309.363-.57.638-.755a1.58 1.58 0 0 1 .212-.118c-.284-.832-.21-1.806.064-2.571c.175-.492.453-.957.835-1.267c.252-.205.552-.34.88-.366c.144-.683.549-1.248 1.074-1.656zM9.5 4.5V4.49l-.002-.05a2.744 2.744 0 0 0-.154-.764a1.222 1.222 0 0 0-.309-.49A.76.76 0 0 0 8.5 3a2.91 2.91 0 0 0-1.756.582C6.28 3.943 6 4.432 6 5a.5.5 0 0 1-.658.474c-.188-.062-.356-.027-.535.117c-.196.16-.387.444-.524.827c-.279.782-.25 1.729.133 2.305A.5.5 0 0 1 4.5 9h.75a2.25 2.25 0 0 1 2.25 2.25v.335a1.5 1.5 0 1 1-1 0v-.335c0-.69-.56-1.25-1.25-1.25H3.5a.499.499 0 0 1-.175-.032l-.003.006C3.124 10.369 3 11.025 3 12c0 .859.315 1.343.638 1.62c.347.298.732.38.862.38a.5.5 0 0 1 .5.5c0 .368.2 1.011.64 1.563c.429.535 1.046.937 1.86.937c.56 0 1.062-.313 1.45-.72c.191-.2.34-.407.437-.577a1.573 1.573 0 0 0 .113-.236V7.5H8.415a1.5 1.5 0 1 1 0-1H9.5v-2zm1 9.999v.967a1.575 1.575 0 0 0 .113.236c.098.17.246.377.436.577c.389.407.892.72 1.451.72c.814 0 1.431-.402 1.86-.937c.44-.552.64-1.195.64-1.563a.5.5 0 0 1 .5-.5c.13 0 .515-.082.862-.38c.323-.277.638-.761.638-1.62c0-.975-.125-1.63-.322-2.026a.923.923 0 0 0-.3-.37A.657.657 0 0 0 16 9.5a.5.5 0 0 1-.416-.777c.384-.576.412-1.523.133-2.305c-.137-.383-.328-.668-.524-.827c-.179-.144-.347-.18-.535-.117A.5.5 0 0 1 14 5c0-.568-.28-1.057-.745-1.418A2.91 2.91 0 0 0 11.5 3a.76.76 0 0 0-.535.186a1.22 1.22 0 0 0-.31.49a2.579 2.579 0 0 0-.155.814v9.01h.75c.69 0 1.25-.56 1.25-1.25v-1.835a1.5 1.5 0 1 1 1 0v1.835a2.25 2.25 0 0 1-2.25 2.25h-.75zM6.5 7a.5.5 0 1 0 1 0a.5.5 0 0 0-1 0zM13 9.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1zm-6 3a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > AI< / span >
< / div >
< / a >
< / li > < li class = "active" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/CS/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M20 4l-2 14.5l-6 2l-6-2L4 4z" > < / path > < path d = "M7.5 8h3v8l-2-1" > < / path > < path d = "M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5" > < / path > < / g > < / svg >
2023-11-10 13:51:34 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > CS< / span >
2023-11-10 13:51:34 +08:00
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/EQ/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z" > < / path > < circle cx = "11.5" cy = "7.5" r = "1" fill = "currentColor" > < / circle > < / g > < / svg >
2023-11-10 13:51:34 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > EQ< / span >
2023-11-10 13:51:34 +08:00
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
< a href = "/categories/Hexo/" >
2023-11-10 13:51:34 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1" > < / path > < path d = "M8 16h8" > < / path > < path d = "M8.322 12.582l7.956.836" > < / path > < path d = "M8.787 9.168l7.826 1.664" > < / path > < path d = "M10.096 5.764l7.608 2.472" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > Hexo< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
2023-11-21 13:49:17 +08:00
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/%E8%87%AA%E5%AA%92%E4%BD%93/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < path d = "M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < / path > < / svg >
2023-11-21 13:49:17 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > 自媒体< / span >
2023-11-21 13:49:17 +08:00
< / div >
< / a >
2023-11-11 18:48:29 +08:00
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/%E8%AF%BB%E4%B9%A6/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M4 16V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v11a1 1 0 0 1-1 1H5a1 1 0 0 0 1 1h9.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2zM15 4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v11h10V4zM7.041 8h.973c.045-.773.192-1.485.42-2.059A3.002 3.002 0 0 0 7.04 8zM6 8.5a4 4 0 1 1 8 0a4 4 0 0 1-8 0zm6.959-.5a3.002 3.002 0 0 0-1.392-2.059c.227.574.374 1.286.419 2.059h.973zm-.973 1c-.045.773-.192 1.486-.42 2.059A3.002 3.002 0 0 0 12.96 9h-.973zm-1.002-1c-.046-.707-.189-1.324-.383-1.778c-.12-.28-.25-.474-.368-.591c-.117-.115-.195-.131-.233-.131c-.038 0-.116.016-.233.13c-.118.118-.248.312-.368.592c-.194.454-.337 1.07-.383 1.778h1.968zM9.016 9c.046.707.189 1.324.383 1.778c.12.28.25.474.368.591c.117.115.195.131.233.131c.038 0 .116-.016.233-.13c.118-.118.248-.313.368-.592c.194-.454.336-1.07.383-1.778H9.016zM8.014 9h-.973c.147.87.668 1.614 1.392 2.059c-.227-.573-.374-1.286-.419-2.059z" fill = "currentColor" > < / path > < / g > < / svg >
2023-11-11 18:48:29 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > 读书< / span >
< / div >
< / a >
< / li > < li class = "" >
< a href = "/categories/%E8%B4%A2%E7%BB%8F/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "9" > < / circle > < path d = "M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1" > < / path > < path d = "M12 6v2m0 8v2" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > 财经< / span >
2023-11-11 18:48:29 +08:00
< / div >
< / a >
2023-11-10 13:44:10 +08:00
< / li > < / ul >
2023-12-25 16:39:03 +08:00
< / nav >
2023-11-06 16:05:27 +08:00
2024-04-05 11:14:12 +08:00
< script src = "/js/066f8989.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< / div >
< div class = "bottom" >
< cosy-tooltip id = "button-preference" placement = "right" >
< span slot = "content" >
< span > 偏好< / span >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > p< / cosy-short-key >
< / span >
< cosy-icon bordered id = "button-about-cosy-theme" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 16 16" >
< g fill = "none" >
< path d = "M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4zM7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0zm3.618-3.602a.708.708 0 0 1-.824-.567l-.26-1.416a.354.354 0 0 0-.275-.282a6.072 6.072 0 0 0-2.519 0a.354.354 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.355.355 0 0 0-.382.095c-.569.627-1 1.367-1.262 2.173a.352.352 0 0 0 .108.378l1.102.931a.704.704 0 0 1 0 1.076l-1.102.931a.352.352 0 0 0-.108.378A5.986 5.986 0 0 0 3.53 12.02a.355.355 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.075 6.075 0 0 0 2.52 0a.353.353 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095c.569-.627 1-1.367 1.262-2.173a.352.352 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.352.352 0 0 0 .108-.378A5.985 5.985 0 0 0 12.47 3.98a.355.355 0 0 0-.382-.095l-1.36.484a.71.71 0 0 1-.111.03zm-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5.105 5.105 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977c.255.334.467.698.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a4.99 4.99 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5.099 5.099 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a4.987 4.987 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637c.164-.386.376-.75.63-1.084z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
2023-11-06 16:05:27 +08:00
< / div >
< / aside >
< main >
2024-04-05 11:14:12 +08:00
< link rel = "stylesheet" href = "/css/4dbc8f91.css" >
2023-11-06 16:05:27 +08:00
< div class = "post-container" >
2023-12-25 16:39:03 +08:00
< header >
< div class = "left" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/7d333f9e.css" >
2023-11-06 16:05:27 +08:00
< nav class = "breadcrumb" >
2023-12-25 16:39:03 +08:00
< section >
< cosy-tooltip placement = "bottom-left" >
< span slot = "content" > < span > 首页< / span >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > H< / cosy-short-key >
< / span >
< cosy-icon href = "/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115l5.5-4.942zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371l-5.5-4.942z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
< svg class = "arrow" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
2023-11-06 16:05:27 +08:00
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
2023-12-26 10:59:02 +08:00
< a class = "ellipsis" href = "/categories/CS/" >
CS
2023-12-25 16:39:03 +08:00
< / a >
< svg class = "arrow" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
2023-11-06 16:05:27 +08:00
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
2023-12-25 16:39:03 +08:00
< span class = "ellipsis" >
css奇技淫巧
< / span >
< / section >
2023-11-06 16:05:27 +08:00
< / nav >
< script src = "/js/31d6cfe0.js" > < / script >
2023-12-25 16:39:03 +08:00
< / div >
< div class = "right" >
2024-04-05 11:14:12 +08:00
< cosy-tooltip id = "toc-show-button" placement = "left" >
< span slot = "content" >
< span > 显示 / 隐藏 文章目录< / span >
< cosy-short-key > ]< / cosy-short-key >
< / span >
< cosy-icon >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path
d="M4 4c-1.104-.019-2 .896-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4zM3 6a1 1 0 0 1 1-1h2.995v10H4a1 1 0 0 1-1-1V6zm4.995 9V5h8.004a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7.995z"
fill="currentColor">< / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
2023-12-25 16:39:03 +08:00
< / div >
< / header >
< div class = "content" >
< main class = "cosy-scrollbar" >
2023-11-06 16:05:27 +08:00
< div class = "article-container" >
<!-- 渲染文章内容 -->
2023-11-08 13:45:34 +08:00
< article >
2023-12-25 16:39:03 +08:00
<!-- 文章标题 -->
< h1 class = "post-title" > css奇技淫巧< / h1 >
< div class = "last-updated" >
2024-03-31 09:01:42 +08:00
上次更新: 2024-03-15 23:14:48
2023-12-25 16:39:03 +08:00
< / div >
<!-- 文章 -->
2023-11-08 13:45:34 +08:00
< h1 id = "grid-布局" > < a href = "#grid-布局" class = "headerlink" title = "grid 布局" > < / a > grid 布局< / h1 > < blockquote >
2023-11-06 16:05:27 +08:00
< p > flex 布局操纵的是一维、一行/ 一列， < / p >
< / blockquote >
< p > 设为网格布局以后，容器子元素（项目）的< code > float< / code > 、< code > display: inline-block< / code > 、< code > display: table-cell< / code > 、< code > vertical-align< / code > 和 < code > column-< / code > 等设置都将失效。< / p >
< ul >
< li > grid-template-columns: 定义每一列的列宽< / li >
< li > grid-template-rows: 定义每一行的行高< / li >
< li > grid-row-gap: 行间距< / li >
< li > grid-column-gap: 列间距< / li >
< li > grid-gap: 行列间距合并< / li >
< li > grid-template-areas: 一个区域由单个或多个单元格组成< / li >
< li > grid-auto-flow: 默认值是 row， < / li >
< li > justify-items: < code > 单元格内容< / code > 的水平对齐< / li >
< li > align-items: < code > 单元格内容< / code > 垂直对齐< / li >
< li > place-items: align-items 属性和 justify-items 属性的合并简写形式< / li >
< li > justify-content: < code > 整个内容区域< / code > 水平对齐< / li >
< li > align-content: < code > 整个内容区域< / code > 垂直对齐< / li >
< li > place-content: align-content 属性和 justify-content 属性的合并简写形式< / li >
< / ul >
< blockquote >
< p > 设置的行或者列比较多的时候，可以使用 repeat()这个函数简化重复的值< / p >
< / blockquote >
< h2 id = "repeat" > < a href = "#repeat" class = "headerlink" title = "repeat()" > < / a > repeat()< / h2 > < p > 第一个参数是重复的次数，第二个参数是所要重复的值、也可以是某个模式< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token comment" > /* 重复 3个100px的列 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > 3< span class = "token punctuation" > ,< / span > 100px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > /* 重复这种布局2次 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > 2< span class = "token punctuation" > ,< / span > 100px 20px 80px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > /* 自动填充，直到容器放不下为止 */< / span >
< span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > repeat< / span > < span class = "token punctuation" > (< / span > auto-fill< span class = "token punctuation" > ,< / span > 100px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "fr" > < a href = "#fr" class = "headerlink" title = "fr" > < / a > fr< / h2 > < p > 方便表示比例关系，网格布局提供了 fr 关键字< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token property" > grid-template-columns< / span > < span class = "token punctuation" > :< / span > 1fr 1fr< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
< h2 id = "grid-template-areas" > < a href = "#grid-template-areas" class = "headerlink" title = "grid-template-areas" > < / a > grid-template-areas< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token property" > grid-template-areas< / span > < span class = "token punctuation" > :< / span >
< span class = "token string" > "header header header"< / span >
< span class = "token string" > "main main sidebar"< / span >
< span class = "token string" > "footer footer footer"< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "item-定位" > < a href = "#item-定位" class = "headerlink" title = "item 定位" > < / a > item 定位< / h2 > < p > < img src = "/img/grid_1.png" alt = "grid_1" > < / p >
2023-11-06 16:05:27 +08:00
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token comment" > /* 1号项目就是从第二根垂直网格线开始第四根结束 */< / span >
< span class = "token selector" > .item1< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > grid-column-start< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > ;< / span >
< span class = "token property" > grid-column-end< / span > < span class = "token punctuation" > :< / span > 4< span class = "token punctuation" > ;< / span >
< span class = "token property" > background< / span > < span class = "token punctuation" > :< / span > red< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "硬件加速-IE9" > < a href = "#硬件加速-IE9" class = "headerlink" title = "硬件加速(IE9+)" > < / a > 硬件加速(IE9+)< / h1 > < blockquote >
< p > 移动端开启,吃内存、增加耗电< / p >
< / blockquote >
< p > < code > animation< / code > 、< code > transform< / code > 、< code > transition< / code > 不会自动开启< code > GPU< / code > 加速，利用< code > transform: translateZ(0)< / code > 就可以开启< code > 3D变换< / code > ，出发硬件加速< / p >
< p > 场景：< code > webKit内核< / code > 偶尔页面闪烁：< code > transform: translate3d(0, 0, 0);< / code > < / p >
< h1 id = "控制台打印-shield-徽章" > < a href = "#控制台打印-shield-徽章" class = "headerlink" title = "控制台打印 shield 徽章" > < / a > 控制台打印 shield 徽章< / h1 > < pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span >
< span class = "token string" > "%c"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'mozzie.com'"< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span >
< span class = "token string" > "%cv"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'2.0.0'"< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span >
< span class = "token string" > "%c\r\n"< / span > < span class = "token operator" > +< / span >
< span class = "token function" > eval< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "'了解更多:https://www.mozzie.com'"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "color: #fff; background: #5281FA; font-size: 12px;border-radius:2px 0 0 2px;padding:3px 6px;"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "border-radius:0 2px 2px 0;padding:3px 6px;color:#333;background:#EBEBEB"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token string" > "margin-top:10px;"< / span >
< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "css-判断-input-是否为空" > < a href = "#css-判断-input-是否为空" class = "headerlink" title = "css 判断 input 是否为空" > < / a > css 判断 input 是否为空< / h1 > < p > < code > :placeholder-shown< / code > ：占位符是否显示的伪类，配合 < code > :not()< / code > （不是必须，反过来也可以）< / p >
< pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > input< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo-input< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > type< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > placeholder< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > name< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > label< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > demo-label< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Name< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > label< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #demo< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 90%< span class = "token punctuation" > ;< / span >
< span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 450px< span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 100%< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 60px< span class = "token punctuation" > ;< / span >
< span class = "token property" > line-height< / span > < span class = "token punctuation" > :< / span > 60px< span class = "token punctuation" > ;< / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 20px< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > 1px solid #ffa500< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input::placeholder< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-input:focus + label,
#demo-input:not(:placeholder-shown) + label< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 12px< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #demo-label< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 22px< span class = "token punctuation" > ;< / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #ffa500< span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > translateY< / span > < span class = "token punctuation" > (< / span > -50%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > transition< / span > < span class = "token punctuation" > :< / span > all 0.3s< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token comment" > /*
* Default
*/< / span >
< span class = "token selector" > body< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 100vh< span class = "token punctuation" > ;< / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > flex< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > body div< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > margin< / span > < span class = "token punctuation" > :< / span > auto< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > body div input< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > border< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > outline< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "居中" > < a href = "#居中" class = "headerlink" title = "居中" > < / a > 居中< / h1 > < h2 id = "transform-大法" > < a href = "#transform-大法" class = "headerlink" title = "transform 大法" > < / a > transform 大法< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #wrapper< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #box< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 50%< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > translate< / span > < span class = "token punctuation" > (< / span > -50%< span class = "token punctuation" > ,< / span > -50%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "0000-大法" > < a href = "#0000-大法" class = "headerlink" title = "0000 大法" > < / a > 0000 大法< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > #wrapper< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > relative< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > #box< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > left< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > right< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > bottom< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "如何让-img-垂直居中" > < a href = "#如何让-img-垂直居中" class = "headerlink" title = "如何让 img 垂直居中" > < / a > 如何让 img 垂直居中< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > imgWrapper< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > xxx.png< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .imgWrapper< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > table-cell< span class = "token punctuation" > ;< / span >
< span class = "token property" > text-align< / span > < span class = "token punctuation" > :< / span > center< span class = "token punctuation" > ;< / span >
< span class = "token property" > vertical-align< / span > < span class = "token punctuation" > :< / span > middle< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "ul-下-li-居中" > < a href = "#ul-下-li-居中" class = "headerlink" title = "ul 下 li 居中" > < / a > ul 下 li 居中< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token comment" > < !--外层包个div/section block元素 -->< / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > clearfix< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token punctuation" > >< / span > < / span > 1< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token punctuation" > >< / span > < / span > 2< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > div< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > text-align< / span > < span class = "token punctuation" > :< / span > center
< span class = "token punctuation" > } < / span >
< span class = "token selector" > ul< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > inline-block
< span class = "token punctuation" > } < / span >
< span class = "token selector" > li< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > inline
< span class = "token property" > float< / span > < span class = "token punctuation" > :< / span > left
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "js-随机渐变背景" > < a href = "#js-随机渐变背景" class = "headerlink" title = "js 随机渐变背景" > < / a > js 随机渐变背景< / h1 > < pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token keyword" > function< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > min< span class = "token punctuation" > ,< / span > max< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token keyword" > return< / span > min < span class = "token operator" > +< / span > Math< span class = "token punctuation" > .< / span > < span class = "token function" > floor< / span > < span class = "token punctuation" > (< / span > Math< span class = "token punctuation" > .< / span > < span class = "token function" > random< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > *< / span > < span class = "token punctuation" > (< / span > max < span class = "token operator" > -< / span > min< span class = "token punctuation" > )< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token keyword" > function< / span > < span class = "token function" > setRandomBg< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > el< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > var< / span > left < span class = "token operator" > =< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 255< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > bottom < span class = "token operator" > =< / span > < span class = "token function" > getRandomRangeNum< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 255< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > css < span class = "token operator" > =< / span > < span class = "token punctuation" > [< / span >
< span class = "token string" > "linear-gradient(to left bottom,hsl("< / span > < span class = "token punctuation" > ,< / span >
left< span class = "token punctuation" > ,< / span >
< span class = "token string" > ", 100%, 85%) 0%,hsl("< / span > < span class = "token punctuation" > ,< / span >
bottom< span class = "token punctuation" > ,< / span >
< span class = "token string" > ", 100%, 85%) 100%)"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token punctuation" > ]< / span > < span class = "token punctuation" > ;< / span >
el< span class = "token punctuation" > .< / span > style< span class = "token punctuation" > .< / span > background < span class = "token operator" > =< / span > css< span class = "token punctuation" > .< / span > < span class = "token function" > join< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > ""< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "css-三角形" > < a href = "#css-三角形" class = "headerlink" title = "css 三角形" > < / a > css 三角形< / h1 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > span< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-top< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-left< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-right< / span > < span class = "token punctuation" > :< / span > 40px solid transparent< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > 40px solid #ff0000< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "1px-神迹" > < a href = "#1px-神迹" class = "headerlink" title = "1px 神迹" > < / a > 1px 神迹< / h1 > < h2 id = "pc-端最优解" > < a href = "#pc-端最优解" class = "headerlink" title = "pc 端最优解" > < / a > pc 端最优解< / h2 > < pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 1px< span class = "token punctuation" > ;< / span > < span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span > < span class = "token property" > background< / span > < span class = "token punctuation" > :< / span > red< / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "移动端-媒体查询-transform" > < a href = "#移动端-媒体查询-transform" class = "headerlink" title = "移动端 - 媒体查询 + transform" > < / a > 移动端 - 媒体查询 + transform< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > .border-bottom::after< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > -webkit-transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "移动端-媒体查询-伪类" > < a href = "#移动端-媒体查询-伪类" class = "headerlink" title = "移动端 - 媒体查询 + 伪类" > < / a > 移动端 - 媒体查询 + 伪类< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > content< / span > < span class = "token punctuation" > :< / span > < span class = "token string" > ''< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > position< / span > < span class = "token punctuation" > :< / span > absolute< span class = "token punctuation" > ;< / span >
< span class = "token property" > top< / span > < span class = "token punctuation" > :< / span > 0< span class = "token punctuation" > ;< / span >
< span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 1px< span class = "token punctuation" > ;< / span >
< span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 100%
< span class = "token property" > background-color< / span > < span class = "token punctuation" > :< / span > #000< span class = "token punctuation" > ;< / span >
< span class = "token property" > transform-origin< / span > < span class = "token punctuation" > :< / span > 50% 0%< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.5< span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token keyword" > only< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 3< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token selector" > .border__1px:before< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > transform< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > scaleY< / span > < span class = "token punctuation" > (< / span > 0.33< span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "横竖屏适配" > < a href = "#横竖屏适配" class = "headerlink" title = "横竖屏适配" > < / a > 横竖屏适配< / h1 > < p > js 检测< / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "resize"< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > =>< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 180< / span > < span class = "token operator" > ||< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 0< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 正常方向或屏幕旋转180度< / span >
console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "竖屏"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token number" > 90< / span > < span class = "token operator" > ||< / span > window< span class = "token punctuation" > .< / span > orientation < span class = "token operator" > ===< / span > < span class = "token operator" > -< / span > < span class = "token number" > 90< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度< / span >
console< span class = "token punctuation" > .< / span > < span class = "token function" > log< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "横屏"< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > css 检测< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > orientation< / span > < span class = "token punctuation" > :< / span > portrait< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > /*竖屏...*/< / span >
< span class = "token punctuation" > } < / span >
< span class = "token atrule" > < span class = "token rule" > @media< / span > screen < span class = "token keyword" > and< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > orientation< / span > < span class = "token punctuation" > :< / span > landscape< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > /*横屏...*/< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "像素" > < a href = "#像素" class = "headerlink" title = "像素" > < / a > 像素< / h1 > < ul >
< li > 物理像素: 物理设备真实的像素< / li >
< li > 独立像素: 平时开发写的 px< / li >
< li > 设备像素比(DPR): = 物理像素 / 设备独立像素< / li >
< / ul >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // 获取 DPR< / span >
window< span class = "token punctuation" > .< / span > devicePixelRatio< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 也可以使用媒体查询< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token atrule" > < span class = "token rule" > @media< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > -webkit-min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span > < span class = "token punctuation" > (< / span > < span class = "token property" > min-device-pixel-ratio< / span > < span class = "token punctuation" > :< / span > 2< span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > { < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "srcset" > < a href = "#srcset" class = "headerlink" title = "srcset" > < / a > srcset< / h1 > < p > 使用 img 标签的 < code > srcset< / code > 属性，浏览器会自动根据像素密度匹配最佳显示图片：< / p >
< pre class = "line-numbers language-markup" data-language = "markup" > < code class = "language-markup" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > conardLi_1x.png< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > srcset< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > conardLi_2x.png 2x, conardLi_3x.png 3x< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > />< / span > < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "字体小于-12px" > < a href = "#字体小于-12px" class = "headerlink" title = "字体小于 12px" > < / a > 字体小于 12px< / h1 > < p > css3 的 < code > transform< / code > 属性，设置值为 < code > scale(x, y)< / code > 定义 2D 缩放转换< / p >
2023-11-06 16:05:27 +08:00
< h1 id = "css-清浮动" > < a href = "#css-清浮动" class = "headerlink" title = "css 清浮动" > < / a > css 清浮动< / h1 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .clearfix::after< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > content< / span > < span class = "token punctuation" > :< / span > < span class = "token string" > ""< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > block< span class = "token punctuation" > ;< / span >
< span class = "token property" > clear< / span > < span class = "token punctuation" > :< / span > both< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "ellipsis" > < a href = "#ellipsis" class = "headerlink" title = "ellipsis" > < / a > ellipsis< / h1 > < h2 id = "单行" > < a href = "#单行" class = "headerlink" title = "单行" > < / a > 单行< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .ellipsis< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span >
< span class = "token property" > text-overflow< / span > < span class = "token punctuation" > :< / span > ellipsis< span class = "token punctuation" > ;< / span >
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > nowrap< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "多行" > < a href = "#多行" class = "headerlink" title = "多行" > < / a > 多行< / h2 > < pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > .ellipsis< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > display< / span > < span class = "token punctuation" > :< / span > -webkit-box< span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-box-orient< / span > < span class = "token punctuation" > :< / span > vertical< span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-line-clamp< / span > < span class = "token punctuation" > :< / span > 3< span class = "token punctuation" > ;< / span > // 最多显示几行
< span class = "token property" > overflow< / span > < span class = "token punctuation" > :< / span > hidden< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h1 id = "页面导入样式时，使用-link-和-import" > < a href = "#页面导入样式时，使用-link-和-import" class = "headerlink" title = "页面导入样式时，使用 link 和 @import" > < / a > 页面导入样式时，使用 link 和 @import< / h1 > < blockquote >
2023-11-06 16:05:27 +08:00
< p > 你可能不信， < / p >
< / blockquote >
< ul >
< li > link: 与< code > dom< / code > 异步加载< / li >
< li > @import: 先加载< code > dom< / code > < / li >
< / ul >
2023-11-08 09:34:00 +08:00
< h1 id = "em-rem-换算" > < a href = "#em-rem-换算" class = "headerlink" title = "em | rem 换算" > < / a > em | rem 换算< / h1 > < p > 相对于HTML根元素 < code > font-size< / code > 来确定的，浏览器的默认字体高是 < code > 16px< / code > ，因此:< / p >
2023-11-06 16:05:27 +08:00
< ul >
< li > 16px = 1em< / li >
< li > 12px = .75em< / li >
< li > 10px = .625em< / li >
< / ul >
2023-11-08 09:34:00 +08:00
< p > 简化 rem 到 px 的换算，因为每个 rem 单位都是 10px 的倍数< / p >
< pre class = "line-numbers language-css" data-language = "css" > < code class = "language-css" > < span class = "token selector" > html< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > font-size< / span > < span class = "token punctuation" > :< / span > 62.5%< span class = "token punctuation" > ;< / span > < span class = "token comment" > /* 这会将默认的 16px 缩小为 10px */< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 也可以使用 js 检测设置< / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // set 1rem = viewWidth / 10< / span >
< span class = "token keyword" > function< / span > < span class = "token function" > setRemUnit< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > var< / span > docEl < span class = "token operator" > =< / span > document< span class = "token punctuation" > .< / span > documentElement< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > var< / span > rem < span class = "token operator" > =< / span > docEl< span class = "token punctuation" > .< / span > clientWidth < span class = "token operator" > /< / span > < span class = "token number" > 10< / span > < span class = "token punctuation" > ;< / span >
docEl< span class = "token punctuation" > .< / span > style< span class = "token punctuation" > .< / span > fontSize < span class = "token operator" > =< / span > rem < span class = "token operator" > +< / span > < span class = "token string" > "px"< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "resize"< / span > < span class = "token punctuation" > ,< / span > setRemUnit< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
window< span class = "token punctuation" > .< / span > < span class = "token function" > addEventListener< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "pageShow"< / span > < span class = "token punctuation" > ,< / span > < span class = "token keyword" > function< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > e< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token keyword" > if< / span > < span class = "token punctuation" > (< / span > e< span class = "token punctuation" > .< / span > persisted< span class = "token punctuation" > )< / span > < span class = "token function" > setRemUnit< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span >
< span class = "token punctuation" > } < / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2023-11-08 09:34:00 +08:00
< h1 id = "less-常用" > < a href = "#less-常用" class = "headerlink" title = "less 常用" > < / a > less 常用< / h1 > < h2 id = "变量" > < a href = "#变量" class = "headerlink" title = "变量" > < / a > 变量< / h2 > < p > LESS 中的变量为完全的 < code > 常量< / code > ，所以只能定义一次< / p >
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @nice-blue< span class = "token punctuation" > :< / span > < / span > #5B83AD< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @light-blue< span class = "token punctuation" > :< / span > < / span > < span class = "token variable" > @nice-blue< / span > < span class = "token operator" > +< / span > #111< span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > #header< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @light-blue< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 输出< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > #header< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #6c94be< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "混合" > < a href = "#混合" class = "headerlink" title = "混合" > < / a > 混合< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .bordered< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > border-top< / span > < span class = "token punctuation" > :< / span > dotted 1px black< span class = "token punctuation" > ;< / span >
< span class = "token property" > border-bottom< / span > < span class = "token punctuation" > :< / span > solid 2px black< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 使用< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > #menu a< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > #111< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .bordered< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
< span class = "token selector" > .post a< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > red< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .bordered< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 带参< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .border-radius (< span class = "token variable" > @radius< / span > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -moz-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @radius< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > #header {< br > .border-radius(4px);< br > }< / p >
< p > < code > @arguments< / code > 变量，包含了所有传递进来的参数. 如果你不想单独处理每一个参数< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .box-shadow (< span class = "token variable" > @x< / span > : 0, < span class = "token variable" > @y< / span > : 0, < span class = "token variable" > @blur< / span > : 1px, < span class = "token variable" > @color< / span > : #000)< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -moz-box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > -webkit-box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > @arguments< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
.< span class = "token function" > box-shadow< / span > < span class = "token punctuation" > (< / span > 2px< span class = "token punctuation" > ,< / span > 5px< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > 无参< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .wrap ()< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > text-wrap< / span > < span class = "token punctuation" > :< / span > wrap< span class = "token punctuation" > ;< / span >
2023-11-08 09:34:00 +08:00
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > pre< span class = "token operator" > -< / span > wrap< span class = "token punctuation" > ;< / span >
< span class = "token property" > white-space< / span > < span class = "token punctuation" > :< / span > < span class = "token operator" > -< / span > moz< span class = "token operator" > -< / span > pre< span class = "token operator" > -< / span > wrap< span class = "token punctuation" > ;< / span >
< span class = "token property" > word-wrap< / span > < span class = "token punctuation" > :< / span > break< span class = "token operator" > -< / span > word< span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span >
< span class = "token selector" > pre< / span > < span class = "token punctuation" > { < / span >
2023-11-08 09:34:00 +08:00
< span class = "token mixin-usage function" > .wrap< / span > < span class = "token punctuation" > ;< / span >
2023-11-06 16:05:27 +08:00
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "lighten-和-darken" > < a href = "#lighten-和-darken" class = "headerlink" title = "lighten 和 darken" > < / a > lighten 和 darken< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @color-base< span class = "token punctuation" > :< / span > < / span > #3bafda< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @color-hover< span class = "token punctuation" > :< / span > < / span > lighten < span class = "token punctuation" > (< / span > < span class = "token variable" > @color-primary< / span > < span class = "token punctuation" > ,< / span > 10%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token variable" > @color-focus< span class = "token punctuation" > :< / span > < / span > darken < span class = "token punctuation" > (< / span > < span class = "token variable" > @color-primary< / span > < span class = "token punctuation" > ,< / span > 10%< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "contrast" > < a href = "#contrast" class = "headerlink" title = "contrast" > < / a > contrast< / h2 > < p > 选择两种颜色中哪一种颜色与另一种颜色形成最大对比。< / p >
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > p< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > a< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > contrast< / span > < span class = "token punctuation" > (< / span > #bbbbbb< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token comment" > //output: black< / span >
< span class = "token property" > b< / span > < span class = "token punctuation" > :< / span > < span class = "token function" > contrast< / span > < span class = "token punctuation" > (< / span > #222222< span class = "token punctuation" > ,< / span > #101010< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span > < span class = "token comment" > //output: white< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2023-11-08 09:34:00 +08:00
< h2 id = "JavaScript-表达式" > < a href = "#JavaScript-表达式" class = "headerlink" title = "JavaScript 表达式" > < / a > JavaScript 表达式< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token variable" > @var< span class = "token punctuation" > :< / span > < / span > ` < span class = "token string" > "hello"< / span > .< span class = "token function" > toUpperCase< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > +< / span > < span class = "token string" > "!"< / span > `< span class = "token punctuation" > ;< / span >
< span class = "token variable" > @height< span class = "token punctuation" > :< / span > < / span > `document.body.clientHeight`< span class = "token punctuation" > ;< / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-06 16:05:27 +08:00
2024-01-04 23:11:27 +08:00
< h2 id = "父选择器" > < a href = "#父选择器" class = "headerlink" title = "& 父选择器" > < / a > & 父选择器< / h2 > < p > < code > & < / code > 只能代表父元素，不能代表父亲的父辈元素，施加改性类或伪类< / p >
2023-11-08 09:34:00 +08:00
< pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > a< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > blue< span class = "token punctuation" > ;< / span >
< span class = "token selector" > & :hover< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > color< / span > < span class = "token punctuation" > :< / span > green< span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 09:34:00 +08:00
< h2 id = "重复父类名" > < a href = "#重复父类名" class = "headerlink" title = "重复父类名" > < / a > 重复父类名< / h2 > < pre class = "line-numbers language-less" data-language = "less" > < code class = "language-less" > < span class = "token selector" > .button< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
< span class = "token selector" > & -ok< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "ok.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > & -cancel< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "cancel.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token selector" > & -custom< / span > < span class = "token punctuation" > { < / span >
< span class = "token property" > background-image< / span > < span class = "token punctuation" > :< / span > < span class = "token url" > < span class = "token function" > url< / span > < span class = "token punctuation" > (< / span > < span class = "token string url" > "custom.png"< / span > < span class = "token punctuation" > )< / span > < / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2023-11-08 13:45:34 +08:00
2024-04-05 11:14:12 +08:00
< div class = "post-tags" >
<!-- 文章tags -->
< / div >
< p class = "motto" > 重拾纯粹的写作< / p >
2023-11-08 13:45:34 +08:00
< / article >
2023-11-06 16:05:27 +08:00
<!-- 评论 -->
< div id = "vcomments" > < / div >
2024-04-05 11:14:12 +08:00
< div id = "tcomment" > < / div >
2023-11-06 16:05:27 +08:00
< / div >
< / main >
2023-12-25 16:39:03 +08:00
<!-- toc -->
2024-04-05 11:14:12 +08:00
< cosy-drag-box id = "toc-drag-box" trigger = "left" min-width = "220" uid = "toc-box" >
< div class = "meta-container" >
< div class = "toc-wrapper cosy-scrollbar" >
< cosy-tooltip placement = "right" >
< p class = "catalog" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" >
< g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M4 6h16" > < / path >
< path d = "M4 12h16" > < / path >
< path d = "M4 18h12" > < / path >
< / g >
< / svg >
< span > 目录< / span >
< / p >
< span slot = "content" >
< span > 隐藏目录< / span >
< cosy-short-key > ]< / cosy-short-key >
< / span >
< / cosy-tooltip >
<!-- 文章toc -->
< ol class = "toc" > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#grid-%E5%B8%83%E5%B1%80" > < span class = "toc-number" > 1.< / span > < span class = "toc-text" > grid 布局< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#repeat" > < span class = "toc-number" > 1.1.< / span > < span class = "toc-text" > repeat()< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#fr" > < span class = "toc-number" > 1.2.< / span > < span class = "toc-text" > fr< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#grid-template-areas" > < span class = "toc-number" > 1.3.< / span > < span class = "toc-text" > grid-template-areas< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#item-%E5%AE%9A%E4%BD%8D" > < span class = "toc-number" > 1.4.< / span > < span class = "toc-text" > item 定位< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F-IE9" > < span class = "toc-number" > 2.< / span > < span class = "toc-text" > 硬件加速(IE9+)< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%89%93%E5%8D%B0-shield-%E5%BE%BD%E7%AB%A0" > < span class = "toc-number" > 3.< / span > < span class = "toc-text" > 控制台打印 shield 徽章< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#css-%E5%88%A4%E6%96%AD-input-%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA" > < span class = "toc-number" > 4.< / span > < span class = "toc-text" > css 判断 input 是否为空< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.< / span > < span class = "toc-text" > 居中< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#transform-%E5%A4%A7%E6%B3%95" > < span class = "toc-number" > 5.1.< / span > < span class = "toc-text" > transform 大法< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#0000-%E5%A4%A7%E6%B3%95" > < span class = "toc-number" > 5.2.< / span > < span class = "toc-text" > 0000 大法< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E5%A6%82%E4%BD%95%E8%AE%A9-img-%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.3.< / span > < span class = "toc-text" > 如何让 img 垂直居中< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#ul-%E4%B8%8B-li-%E5%B1%85%E4%B8%AD" > < span class = "toc-number" > 5.4.< / span > < span class = "toc-text" > ul 下 li 居中< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#js-%E9%9A%8F%E6%9C%BA%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AF" > < span class = "toc-number" > 6.< / span > < span class = "toc-text" > js 随机渐变背景< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#css-%E4%B8%89%E8%A7%92%E5%BD%A2" > < span class = "toc-number" > 7.< / span > < span class = "toc-text" > css 三角形< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#1px-%E7%A5%9E%E8%BF%B9" > < span class = "toc-number" > 8.< / span > < span class = "toc-text" > 1px 神迹< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#pc-%E7%AB%AF%E6%9C%80%E4%BC%98%E8%A7%A3" > < span class = "toc-number" > 8.1.< / span > < span class = "toc-text" > pc 端最优解< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-transform" > < span class = "toc-number" > 8.2.< / span > < span class = "toc-text" > 移动端 - 媒体查询 + transform< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2-%E4%BC%AA%E7%B1%BB" > < span class = "toc-number" > 8.3.< / span > < span class = "toc-text" > 移动端 - 媒体查询 + 伪类< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E6%A8%AA%E7%AB%96%E5%B1%8F%E9%80%82%E9%85%8D" > < span class = "toc-number" > 9.< / span > < span class = "toc-text" > 横竖屏适配< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E5%83%8F%E7%B4%A0" > < span class = "toc-number" > 10.< / span > < span class =
< / div >
2023-12-25 16:39:03 +08:00
< / div >
2024-04-05 11:14:12 +08:00
< / cosy-drag-box >
2023-11-06 16:05:27 +08:00
< / div >
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
< / div >
< script >
2023-11-08 10:11:56 +08:00
window.page = {
use: ''
}
2023-11-06 16:05:27 +08:00
window.katex = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
}
window.mermaid = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-15 10:21:41 +08:00
theme: "",
2023-11-06 16:05:27 +08:00
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
}
window.valine = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
avatar: 'monsterid',
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
serverURLs: '//tismit6u.api.lncldglobal.com'
};
2024-04-05 11:14:12 +08:00
window.twikoo = {
enable: "",
envId: "https://twikoo.maxshader.com",
cdn: 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js',
lang: 'zh-CN',
}
2023-11-06 16:05:27 +08:00
< / script >
2024-04-05 11:14:12 +08:00
< script src = "/js/8f5fa89f.js" > < / script >
2023-11-06 16:05:27 +08:00
< / main >
< / body >
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
< script >
2023-12-25 16:39:03 +08:00
window.theme = {
color: 'hsl(238,50%,56%)'
2023-11-06 16:05:27 +08:00
}
< / script >
2023-12-25 16:39:03 +08:00
2024-04-05 11:14:12 +08:00
< script src = "/js/e5a59732.js" > < / script >
2023-11-06 16:05:27 +08:00
< / html >
