css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
.output_wrapper figcaption { margin-top: 10px; text-align: center; color: rgba(153, 153, 153, 1); font-size: 0.7em }
.output_wrapper pre code .linenum { padding-right: 20px; word-spacing: 0 }
.task-list-list { list-style-type: none }
.task-list-list.checked { color: rgba(62, 62, 62, 1) }
.task-list-list.uncheck { color: rgba(191, 193, 191, 1) }
.task-list-list .icon_uncheck, .task-list-list .icon_check { display: inline-block; vertical-align: middle; margin-right: 10px }
.task-list-list .icon_check::before { content: “√”; border: 2px solid rgba(62, 62, 62, 1); color: rgba(255, 0, 0, 1) }
.task-list-list .icon_uncheck::before { content: “x”; border: 2px solid rgba(191, 193, 191, 1); color: rgba(191, 193, 191, 1) }
.task-list-list .icon_check::before, .task-list-list .icon_uncheck::before { padding: 2px 8px 2px 5px; border-radius: 5px }
.katex-display { display: block; margin: 1em 0; text-align: center; font-size: 1.5em }
.katex-display>.katex { display: inline-block; text-align: initial }
.katex { font-family: Consolas, Inconsolata, Courier, monospace; line-height: 1.2; white-space: nowrap; text-indent: 0; text-rendering: auto; font-size: 1em }
.katex * { }
.katex .katex-html { display: inline-block }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden }
.katex .base { position: relative; display: inline-block }
.katex .strut { display: inline-block }
.katex .mathrm { font-style: normal }
.katex .textit { font-style: italic }
.katex .mathit { font-style: italic }
.katex .mathbf { font-weight: bold }
.katex .amsrm { }
.katex .mathbb { }
.katex .mathcal { }
.katex .mathfrak { }
.katex .mathtt { }
.katex .mathscr { }
.katex .mathsf { }
.katex .mainit { font-style: italic }
.katex .mainrm { font-style: normal }
.katex .mord+.mop { margin-left: 0.16667em }
.katex .mord+.mbin { margin-left: 0.22222em }
.katex .mord+.mrel { margin-left: 0.27778em }
.katex .mord+.minner { margin-left: 0.16667em }
.katex .mop+.mord { margin-left: 0.16667em }
.katex .mop+.mop { margin-left: 0.16667em }
.katex .mop+.mrel { margin-left: 0.27778em }
.katex .mop+.minner { margin-left: 0.16667em }
.katex .mbin+.mord { margin-left: 0.22222em }
.katex .mbin+.mop { margin-left: 0.22222em }
.katex .mbin+.mopen { margin-left: 0.22222em }
.katex .mbin+.minner { margin-left: 0.22222em }
.katex .mrel+.mord { margin-left: 0.27778em }
.katex .mrel+.mop { margin-left: 0.27778em }
.katex .mrel+.mopen { margin-left: 0.27778em }
.katex .mrel+.minner { margin-left: 0.27778em }
.katex .mclose+.mop { margin-left: 0.16667em }
.katex .mclose+.mbin { margin-left: 0.22222em }
.katex .mclose+.mrel { margin-left: 0.27778em }
.katex .mclose+.minner { margin-left: 0.16667em }
.katex .mpunct+.mord { margin-left: 0.16667em }
.katex .mpunct+.mop { margin-left: 0.16667em }
.katex .mpunct+.mrel { margin-left: 0.16667em }
.katex .mpunct+.mopen { margin-left: 0.16667em }
.katex .mpunct+.mclose { margin-left: 0.16667em }
.katex .mpunct+.mpunct { margin-left: 0.16667em }
.katex .mpunct+.minner { margin-left: 0.16667em }
.katex .minner+.mord { margin-left: 0.16667em }
.katex .minner+.mop { margin-left: 0.16667em }
.katex .minner+.mbin { margin-left: 0.22222em }
.katex .minner+.mrel { margin-left: 0.27778em }
.katex .minner+.mopen { margin-left: 0.16667em }
.katex .minner+.mpunct { margin-left: 0.16667em }
.katex .minner+.minner { margin-left: 0.16667em }
.katex .mord.mtight { margin-left: 0 }
.katex .mop.mtight { margin-left: 0 }
.katex .mbin.mtight { margin-left: 0 }
.katex .mrel.mtight { margin-left: 0 }
.katex .mopen.mtight { margin-left: 0 }
.katex .mclose.mtight { margin-left: 0 }
.katex .mpunct.mtight { margin-left: 0 }
.katex .minner.mtight { margin-left: 0 }
.katex .mord+.mop.mtight { margin-left: 0.16667em }
.katex .mop+.mord.mtight { margin-left: 0.16667em }
.katex .mop+.mop.mtight { margin-left: 0.16667em }
.katex .mclose+.mop.mtight { margin-left: 0.16667em }
.katex .minner+.mop.mtight { margin-left: 0.16667em }
.katex .vlist-t { display: inline-table; table-layout: fixed }
.katex .vlist-r { display: table-row }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative }
.katex .vlist>span { display: block; height: 0; position: relative }
.katex .vlist>span>span { display: inline-block }
.katex .vlist>span>.pstrut { overflow: hidden; width: 0 }
.katex .vlist-t2 { margin-right: -2px }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px }
.katex .msupsub { text-align: left }
.katex .mfrac>span>span { text-align: center }
.katex .mfrac .frac-line { display: inline-block; width: 100% }
@media screen { .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .underline .underline-line { min-height: 1px } }
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .underline .underline-line { min-height: 0.5px } }
.katex .mspace { display: inline-block }
.katex .mspace.negativethinspace { margin-left: -0.16667em }
.katex .mspace.thinspace { width: 0.16667em }
.katex .mspace.negativemediumspace { margin-left: -0.22222em }
.katex .mspace.mediumspace { width: 0.22222em }
.katex .mspace.thickspace { width: 0.27778em }
.katex .mspace.sixmuspace { width: 0.333333em }
.katex .mspace.eightmuspace { width: 0.444444em }
.katex .mspace.enspace { width: 0.5em }
.katex .mspace.twelvemuspace { width: 0.666667em }
.katex .mspace.quad { width: 1em }
.katex .mspace.qquad { width: 2em }
.katex .llap, .katex .rlap, .katex .clap { width: 0; position: relative }
.katex .llap>.inner, .katex .rlap>.inner, .katex .clap>.inner { position: absolute }
.katex .llap>.fix, .katex .rlap>.fix, .katex .clap>.fix { display: inline-block }
.katex .llap>.inner { right: 0 }
.katex .rlap>.inner, .katex .clap>.inner { left: 0 }
.katex .clap>.inner>span { margin-left: -50%; margin-right: 50% }
.katex .katex-logo .a { font-size: 0.75em; margin-left: -0.32em; position: relative; top: -0.2em }
.katex .katex-logo .t { margin-left: -0.23em }
.katex .katex-logo .e { margin-left: -0.1667em; position: relative; top: 0.2155em }
.katex .katex-logo .x { margin-left: -0.125em }
.katex .rule { display: inline-block; border: 0 solid; position: relative }
.katex .overline .overline-line, .katex .underline .underline-line { display: inline-block; width: 100% }
.katex .sqrt>.root { margin-left: 0.277778em; margin-right: -0.555556em }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em }
.katex .delimsizing.size1 { }
.katex .delimsizing.size2 { }
.katex .delimsizing.size3 { }
.katex .delimsizing.size4 { }
.katex .delimsizing.mult .delim-size1>span { }
.katex .delimsizing.mult .delim-size4>span { }
.katex .nulldelimiter { display: inline-block; width: 0.12em }
.katex .delimcenter { position: relative }
.katex .op-symbol { position: relative }
.katex .op-symbol.small-op { }
.katex .op-symbol.large-op { }
.katex .op-limits>.vlist-t { text-align: center }
.katex .accent>.vlist-t { text-align: center }
.katex .accent .accent-body>span { width: 0 }
.katex .accent .accent-body.accent-vec>span { position: relative; left: 0.326em }
.katex .accent .accent-body.accent-hungarian>span { position: relative; left: 0.25em }
.katex .mtable .vertical-separator { display: inline-block; margin: 0 -0.025em; width: 0.05em }
@media screen { .katex .mtable .vertical-separator { min-width: 1px } }
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { .katex .mtable .vertical-separator { min-width: 0.5px } }
.katex .mtable .arraycolsep { display: inline-block }
.katex .mtable .col-align-c>.vlist-t { text-align: center }
.katex .mtable .col-align-l>.vlist-t { text-align: left }
.katex .mtable .col-align-r>.vlist-t { text-align: right }
.katex .svg-align { text-align: left }
.katex svg { display: block; position: absolute; width: 100% }
.katex svg path { fill: currentColor }
.katex svg line { stroke: currentColor }
.katex .stretchy { width: 100%; display: block }
.katex .stretchy::before, .katex .stretchy::after { content: “” }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden }
.katex .halfarrow-left { position: absolute; left: 0; width: 50.1%; overflow: hidden }
.katex .halfarrow-right { position: absolute; right: 0; width: 50%; overflow: hidden }
.katex .brace-left { position: absolute; left: 0; width: 25.1%; overflow: hidden }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden }
.katex .brace-right { position: absolute; right: 0; width: 25.1%; overflow: hidden }
.katex .x-arrow-pad { padding: 0 0.5em }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center }
.katex .boxpad { padding: 0 0.3em }
.katex .fbox { box-sizing: border-box; border: 0.04em solid rgba(0, 0, 0, 1) }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid }
.katex .cancel-pad { padding: 0 0.2em }
.katex .mord+.cancel-lap, .katex .mbin+.cancel-lap { margin-left: -0.2em }
.katex .cancel-lap+.mord, .katex .cancel-lap+.mbin, .katex .cancel-lap+.msupsub { margin-left: -0.2em }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em }
.output_wrapper .hljs { color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); display: block; overflow-x: auto; padding: 0.5em }
.output_wrapper .hljs-params { color: rgba(255, 152, 35, 1) }
.output_wrapper .hljs-number, .output_wrapper .hljs-literal, .output_wrapper .hljs-symbol, .output_wrapper .hljs-bullet { color: rgba(174, 135, 250, 1) }
.output_wrapper .hljs-function, .output_wrapper .hljs-built_in, .output_wrapper .hljs-name, .output_wrapper .hljs-keyword, .output_wrapper .hljs-selector-tag, .output_wrapper .hljs-deletion { color: rgba(248, 35, 117, 1) }
.output_wrapper .hljs-variable, .output_wrapper .hljs-template-variable, .output_wrapper .hljs-link { color: rgba(98, 151, 85, 1) }
.output_wrapper .hljs-comment, .output_wrapper .hljs-quote { color: rgba(128, 128, 128, 1) }
.output_wrapper .hljs-meta { color: rgba(91, 218, 237, 1) }
.output_wrapper .hljs-string, .output_wrapper .hljs-attribute, .output_wrapper .hljs-addition { color: rgba(238, 220, 112, 1) }
.output_wrapper .hljs-attr, .output_wrapper .hljs-section, .output_wrapper .hljs-title, .output_wrapper .hljs-type { color: rgba(165, 218, 45, 1) }
.output_wrapper .hljs-selector-class { color: rgba(165, 218, 45, 1) }
.output_wrapper .hljs-emphasis { font-style: italic }
.output_wrapper .hljs-strong { font-weight: bold }
.output_wrapper pre code { line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0 }
.output_wrapper { font-size: 16px; color: rgba(62, 62, 62, 1); line-height: 1.6; font-family: “Helvetica Neue”, Helvetica, “Hiragino Sans GB”, “Microsoft YaHei”, Arial, sans-serif }
.output_wrapper * { font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 }
.output_wrapper p { margin: 1.5em 0 }
.output_wrapper h1, .output_wrapper h2, .output_wrapper h3, .output_wrapper h4, .output_wrapper h5, .output_wrapper h6 { margin: 1.5em 0; font-weight: bold }
.output_wrapper h1 { font-size: 1.6em }
.output_wrapper h2 { font-size: 1.4em }
.output_wrapper h3 { font-size: 1.3em }
.output_wrapper h4 { font-size: 1.2em }
.output_wrapper h5 { font-size: 1em }
.output_wrapper h6 { font-size: 1em }
.output_wrapper h3 { }
.output_wrapper ul, .output_wrapper ol { padding-left: 32px }
.output_wrapper ul { list-style-type: disc }
.output_wrapper ol { list-style-type: decimal }
.output_wrapper li * { }
.output_wrapper li { margin-bottom: 0.5em }
.output_wrapper .code_size_default { line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0 }
.output_wrapper .code_size_tight { line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0 }
.output_wrapper pre code { font-family: Consolas, Inconsolata, Courier, monospace }
.output_wrapper blockquote { display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(129, 145, 152, 1); border-left: 6px solid rgba(220, 230, 240, 1); background: rgba(242, 247, 251, 1); overflow: auto; word-wrap: normal; word-break: normal }
.output_wrapper blockquote p { margin: 0 }
.output_wrapper a { text-decoration: none; color: rgba(30, 107, 184, 1); word-wrap: break-word }
.output_wrapper strong { font-weight: bold }
.output_wrapper em { font-style: italic }
.output_wrapper del { font-style: italic }
.output_wrapper strong em { font-weight: bold }
.output_wrapper hr { height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1) }
.output_wrapper p code { word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(233, 105, 0, 1); background: rgba(248, 248, 248, 1) }
.output_wrapper img { display: block; margin: 0 auto; max-width: 100% }
.output_wrapper table { display: table; width: 100%; text-align: left }
.output_wrapper tbody { border: 0 }
.output_wrapper table tr { border-top: 1px solid rgba(204, 204, 204, 1); border-right: 0; border-bottom: 0; border-left: 0; background-color: rgba(255, 255, 255, 1) }
.output_wrapper table tr th, .output_wrapper table tr td { font-size: 1em; border: 1px solid rgba(204, 204, 204, 1); padding: 0.5em 1em; text-align: left }
.output_wrapper table tr th { font-weight: bold; background-color: rgba(240, 240, 240, 1) }
body { width: 100%; margin: 0; padding: 0 }
#export_content { margin: 0; padding: 20px; border: 1px solid rgba(149, 155, 111, 1); background: rgba(255, 255, 255, 1) }
记录几种常见的文字效果
示例查看:http://pangyongsheng.github.io/cssFont/
一、文字剪贴蒙版
在PS中,对文字图层栅格化,然后可将其他图层创建为文字的剪贴蒙版,而在css中要实现类似的文字效果,我们需要先设置背景裁剪(background-clip)为文字(text),然后将字体颜色(color)或者文字填充(text-fill-color)设置为透明(transparent)即可实现将背景转化为当前元素的剪贴蒙版的相同效果;
为了更好的效果首先我们定义一个简单的的公共样式,如下:
.div{
font-weight: bold;
font-size: 80px;
margin: 50px;
border: 10px dashed #666;
}
1、背景图片剪贴蒙版
设置背景图片,设置背景裁剪和文字颜色
.bg-clip{
background-image: url(../img/1.jpg);
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color:transparent;
}
<div class="div bg-clip">图片背景文字剪贴蒙版</div>
效果如上第一个
2、渐变条纹背景剪贴蒙版
使用线性渐变设置一个七彩条纹的背景,然后设置背景裁剪为text和文字填充颜色为透明:
.bg-clip2{
background:linear-gradient(
90deg,
red 0%,red 14.3%,
orange 0,orange 28.6%,
yellow 0,yellow 42.9%,
green 0,green 57.2%,
blue 0, blue 71.5%,
indigo 0,indigo 85.8%,
violet 0, violet 100%
);
background-repeat:no-repeat;
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
<div class="div bg-clip2">渐变背景文字剪贴蒙版</div>
3、剪贴蒙版的动画效果
同上,首先设置一个渐变背景,但这里我们background-size宽度设为50%,最后在添加一个背景移动的动画:
.bg-clip3{
background-image: linear-gradient(
45deg,
#ccc 0%, #ccc 30%,
#00B4F1 0%, #00B4F1 70%,
#ccc 0%, #ccc 100%);
background-size: 50% 100%;
-webkit-background-clip: text;
background-clip: text;
color:transparent;
background-position: 0% 50%;
animation: aitf 8s linear infinite;
}
@keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
<div class="div bg-clip3">剪贴蒙版动画效果</div>
二、text-shadow的应用
text-shadow有四个属性值
属性 | 值 |
---|---|
h-shadow | 水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值是 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色 |
text-shadow属性可以向文本添加一个或多个阴影,我们可由此作出许多不同的有趣效果,以下仅为几个参考示例:
1、文字的投影效果
最基本的投影效果
.shadow1 {
color: red;
text-shadow: 5px 5px 5px #000;
}
2、文字的描边效果
对文字添加四个分别向上下左右位移为1px的红色投影,即可实现红色描边效果
.shadow2 {
color: white;
text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;
}
3、文字的浮雕效果
对文字添加向左上偏移1px的黑色(暗)模糊值较小的投影,再分别添加向右和向下的蓝色(亮色)模糊值较大的投影,即可实现文字浮雕特效
.shadow3 {
color: white;
text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;
}
4、文字的剪纸效果
文字设为白色,添加向左1px的黑色投影,添加向右和向下的蓝色投影:
.shadow4 {
color: white;
text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}
5、文字的发光效果
添加两层无偏移的白色投影
.shadow5 {
color: blue;
background-color:#949191;
text-shadow: 0px 0px 3px white, 0px 0px 5px white;
}
三、文字的排版
1、文字的环形排版
这里应用了svg路径实现,创建一个圆形的路径,在和元素写入文本,通过xlink:href属性把它链到我们的圆上,设置圆形填充为none,svg标签overflow为visib,参考如下:
<div class="circlar">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
<text>
<textPath xlink:href="#circle">
这是一个圆形文字效果w(゚Д゚)w ~~~!!!
</textPath>
</text>
</svg>
</div>
.circlar path{
fill: none;
}
.circlar{
width: 300px;
height: 300px;
margin: 100px;
}
.circlar svg{
display: block;
overflow: visible;
}
2、自右向左的竖排文字
通过设置writing-mode的值内容块固有的书写方向
属性 | 值 |
---|---|
vertical-rl | 垂直的自右到左 |
vertical-lr | 垂直的自左到右 |
sideways-rl | 水平的自右到左 |
sideways-lr | 水平的自左到右 |
示例:
.tbl{
margin: 100px;
writing-mode:vertical-rl;
}
.tbl>span::after{
content: \'\A\';
white-space: pre;
}
<div class="tbl">
<span>何日归家洗客袍?</span>
<span>银字笙调,心字香烧。</span>
<span>流光容易把人抛,红了樱桃,绿了芭蕉。</span>
</div>
3、换行
最后安利一种文字换行的方法,在上一的示例中已有使用:
在Unicode中有一个转义字符是等同于换行的:0x000A。在CSS中,可以写成”\000A”,或”\A”,通过伪类加入标签,即可实现各个标签的换行,如上示例中为没一句诗的span元素添加换行;