1. 连字符断行——英文单词
英文文档下，实现英文单词的断行。
- 可以通过一些软连字符（
­）来辅助浏览器进行断词 - CSS属性
hyphens接受三个值：none、manual和auto
manual是hyphens属性的初始值，其行为可以在任何时候手工插入软连字符­来实现断词折行的效果。而hyphens: none;会禁用这种行为
<!DOCTYPE html>
<html lang="en"><style> div {width: 8.7em;font: 180%/1.4 Baskerville, serif;text-align: justify;background: #ccc;margin-top: 10px;}.app {/*禁用软连字符（`­`）断行 */hyphens: none;} </style><body><div>“The only way to get rid of a temptation is to yield to it.”</div><div>“The only way to get rid of a tempta­tion is to yield to it.”</div><div class="app">“The only way to get rid of a tem­ptation is to yield to it.”</div></body>
</html>
2. 换行
2.1 <br> 元素换行
2.2 Unicode 换行字符\A
一个专门代表换行符的Unicode 字符：0x000A。在 CSS 中，这个字符可以写作 “\000A”，或简化为 “\A”。我们可以用它来作为 ::after伪元素的内容，并将其添加到每个 <dd> 元素的尾部
在 HTML 代码中输入换行符，默认情况下，这些换行符会与相邻的其他空白符进行合并。需要用
white-space: pre;保留源代码中的这些空白符和换行
<!DOCTYPE html>
<html lang="en"><style> dt,dd {display: inline;margin: 0;}dd {font-weight: 600;}/*对 <dt> 之前的最后一个 <dd> 来插入换行*/dd + dt::before {content: "\A";white-space: pre;}/*在每个前面有<dd> 的 <dd> 头部插入逗号*/dd + dd::before {content: ", ";font-weight: normal;margin-left: -0.25em;}body {font: 150%/1.6 Baskerville, Palatino, serif;} </style><body><dl><dt>Name:</dt><dd>Lea Verou</dd><dt>Email:</dt><dd>lea@verou.me</dd><dd>leaverou@mit.edu</dd><dt>Location:</dt><dd>Earth</dd></dl></body>
</html>
3. 文本行的斑马条纹
对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。
可以在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适配font-size 了。
<!DOCTYPE html>
<html lang="en"><style> pre {padding: 0.5em;line-height: 1.5;background: hsl(20, 50%, 95%);/* 实现条纹背景*/background-image: linear-gradient(rgba(120, 0, 0, 0.1) 50%,transparent 0);background-size: auto 3em;/*浏览器解析 background-position时以 content box 的外沿作为基准，而不是默认的 padding box 外沿*/background-origin: content-box;font-family: Consolas, Monaco, monospace;}code {font: inherit;} </style><body><pre><code>while (true) {var d = new Date();if (d.getDate()==1 &&d.getMonth()==3) {alert("TROLOLOL");}}</code></pre></body>
</html>
3.1 CSS属性white-space——处理空白部分
4. 调整制表符 tab 的空格数
包含大量代码的网页，在使用<pre>和 <code> 元素来显示代码时，设置默认tab的空格数
<!DOCTYPE html>
<html><head><style> pre {padding: 0.5em;line-height: 1.5;background: hsl(20, 50%, 95%);font-family: Consolas, Monaco, monospace;}#t1 {-moz-tab-size: 4; /* Firefox */tab-size: 4;}#t2 {-moz-tab-size: 10; /* Firefox */tab-size: 10;} </style></head><body><h1>tab-size 属性</h1><pre id="t1">I use tab-size 4</pre><pre id="t2">I use tab-size 10</pre></body>
</html>
5. 字体的连字效果——font-variant-ligatures
CSS简写属性font-variant，由很多新的展开式属性组合而成。其中之一叫作 font-variant-ligatures，专门用来控制连字效果的开启和关闭。
如果要启用所有可能的连字，需要同时指定这三个标识符：
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-variant-ligatures: none，会把所有的连字效果都关掉font-variant-ligatures:normal为默认值，
6. 华丽的 & 符号
用一种单独的字体美化某个特定的字符
<!DOCTYPE html>
<html><head><style> .amp {font-family: Baskerville, "Goudy Old Style", Garamond, Palatino, serif;font-style: italic;} </style></head><body>HTML <span class="amp">&</span> CSS</body>
</html>
<!DOCTYPE html>
<html><head><style> @font-face {font-family: Ampersand;/*@font-face 规则中的 src 描述符还可以接受 local()函数，用于指定本地字体的名称*/src: local("Baskerville-Italic"), local("GoudyOldStyleT-Italic"),local("Garamond-Italic"), local("Palatino-Italic");/*unicode-range 描述符只在 @font-face 规则内部生效*//*用于把字体作用的字符范围限制在一个子集内*/unicode-range: U+26;}h1 {font-family: Ampersand, Helvetica, sans-serif;} </style></head><body><h1>HTML & CSS</h1></body>
</html>
6.1 unicode-range 语法
unicode-range的语法是基于“Unicode 码位”- 加上 U+ 前缀,指定一个字符区间,比如 U+400-4FF
- 允许同时指定多个字符或多个区间，把它们用逗号隔开即可,比如 U+26, U+4??, U+2665-2670
7. 自定义下划线
text-decoration: underline;
7.1 CSS背景渐变实现自定义下划线
<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}a {background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 0.98em;}p:nth-child(2) a {background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;background-size: 0.2em 2px;background-position: 0 0.98em;} </style></head><body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p></body>
</html>
7.2 直接使用下划线属性text-decoration
<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}a {/* text-decoration简写属性 */text-decoration-color: blue;text-decoration-style: wavy;text-decoration-line: underline;text-decoration-skip-ink: none;} </style></head><body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p></body>
</html>
8. 现实中的文字效果
8.1 凸版印刷效果
凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮
<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}p {padding: 0.8em 1em;background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);}p + p {background: hsl(210, 13%, 30%);color: hsl(210, 13%, 60%);text-shadow: 0 -1px 1px black;} </style></head><body><p>“The only way to get rid of a temptation is to yield to it.”</p><p>“The only way to get rid of a temptation is to yield to it.”</p></body>
</html>
8.2 空心字效果
<!DOCTYPE html>
<html><head><style> h1 {margin: 0;color: white;}/*第一种方案——重叠多层轻微模糊的投影来模拟描边*/h1:first-child {text-shadow: 1px 1px black, -1px -1px black, 1px -1px black,-1px 1px black;}/*第二种方案-使用 SVG 来实现正常的粗描边效果*/h1 text {fill: currentColor;}h1 use {stroke: black;stroke-width: 6;stroke-linejoin: round;}body {background: deeppink;font: bold 200%/1 Rockwell, serif;} </style></head><body><h1>CSS</h1><h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></h1></body>
</html>
8.3 文字外发光效果—— text-shadow
文字外发光效果常用于凸显标题，或给链接添加鼠标悬停效果
只需要准备几层重叠的 text-shadow 即可，不需要考虑偏移量，颜色也只需跟文字保持一致
<!DOCTYPE html>
<html><head><style> body {background: #203;font: bold 500%/1 Rockwell, serif;}a {color: #ffc;text-decoration: none;transition: 1s;}a:hover {text-shadow: 0 0 0.1em, 0 0 0.3em;} </style></head><body><a href="http://csssecrets.io">Glow</a></body>
</html>
8.4 文字凸起效果
主要思路就是使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果
<!DOCTYPE html>
<html><head><style> body {background: #58a;color: white;text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0, 0%, 80%),0 3px hsl(0, 0%, 75%), 0 4px hsl(0, 0%, 70%), 0 5px hsl(0, 0%, 65%),0 5px 10px black;font: bold 500%/1 Rockwell, serif;} </style></head><body>CSS3d</body>
</html>
<template><h1>LXL long</h1>
</template>
<script>
export default {name: "AboutView"
}
</script>
<style lang="scss" scoped>
@mixin text-3d($color: white, $depth: 5) {$shadows: (); $shadow-color: $color;@for $i from 1 through $depth {$shadow-color: darken($shadow-color, 10%);$shadows: append($shadows,0 ($i * 1px) $shadow-color, comma);}color: $color;/* append() 函数是用来将某个值插入到列表中，并且处于最末位。*/text-shadow: append($shadows,0 ($depth * 1px) 10px black, comma);
}
h1 { @include text-3d(#eee, 4); }
</style>
9. 环形文字——SVG
让一个短句沿着圆形的路径进行排列
SVG 原生支持以任意路径排队的文字，而圆形只不过是一种特定的路径而已
<!DOCTYPE html>
<html><head><style> body {font: bold 120% Helvetica, sans-serif;}.circular {width: 30em;height: 30em;margin: 4em auto 0;}.circular svg {display: block;overflow: visible;transition: 10s linear transform;}.circular svg:hover {transform: rotate(-2turn);}.circular text {fill: currentColor;}.circular path {fill: none;} </style></head><body><div class="circular">circular reasoning works because</div></body><script> // 这段脚本会遍历所有设置了 circular 类的元素，将其文本内容删除并//保存在变量中，然后为其填入必要的 SVG 元素function $$(selector, context) {context = context || document;var elements = context.querySelectorAll(selector);return Array.prototype.slice.call(elements);}$$(".circular").forEach(function(el) {var NS = "http://www.w3.org/2000/svg";var svg = document.createElementNS(NS, "svg");svg.setAttribute("viewBox", "0 0 100 100");var circle = document.createElementNS(NS, "path");circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");circle.setAttribute("id", "circle");var text = document.createElementNS(NS, "text");var textPath = document.createElementNS(NS, "textPath");textPath.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#circle");textPath.textContent = el.textContent;text.appendChild(textPath);svg.appendChild(circle);svg.appendChild(text);el.textContent = "";el.appendChild(svg);}); </script>
</html>
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
2969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
