16.设计—下-灵析社区

六、多方法隐藏元素

七、实现文字描边

text-shadow

<style>
div {
font-size: 100px;
color: #fff;
text-shadow: 0 0 3px black;
}
</style>
<div>文字描边</div>

-webkit-text-stroke

<style>
div {
font-size: 100px;
color: #fff;
-webkit-text-stroke: 3px black;
}
</style>
<div>文字描边</div>

position: relative/position: absolute子绝父相

<style>
div {
position: relative;
font-size: 100px;
color: #fff;
}
div p {
position: absolute;
margin: 0;
}
div p:first-child {
font-weight: bolder;
color: black;
}
</style>
<div>
<p>文字描边</p>
<p>文字描边</p>
</div>

八、实现渐变背景

背景图片

一张宽 1px 像素，高度沿渐变方向固定，重复铺满即可

<style>
div {
  height: 250px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAIAAADvIroEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA01pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKDIwMjAwODE4Lm0uMTAxMiAyMDIwLzA4LzE4OiBmODJmNDMzNzYxKSAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQxQ0JDMDQyNzlEOTExRUJBQkYyQzQzRUVCM0ZDNjg0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQxQ0JDMDQzNzlEOTExRUJBQkYyQzQzRUVCM0ZDNjg0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDFDQkMwNDA3OUQ5MTFFQkFCRjJDNDNFRUIzRkM2ODQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDFDQkMwNDE3OUQ5MTFFQkFCRjJDNDNFRUIzRkM2ODQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz470lWNAAAAp0lEQVR42pRTQQ6DMAxLInHc/x+0M/8BaWAKbQQobtQdkGmtuLHTCr6zYdtNRAzlq6jvtRZEQ8Y3vP81cBeWekArMp5oUy70k/dFee+B+OprEF9ei1NTu3UiSPo7M2k89ZVkeu0jng33GM9OdbV5efIqSS4dTz4jlvlA/SsXKM98JFfnH76qxh93hd7jbN7ZvDwbJX5G5h3fQcy31i4b7DOZrL/9EGAAxQGYLZj/m8EAAAAASUVORK5CYII=);
  background-repeat: repeat-x;
  background-size: 1px 100%;
}
</style>
<div></div>

linear-gradient

<style>
div {
  height: 250px;
  background-image: linear-gradient(to bottom, pink, skyblue);
}
</style>
<div></div>

九、对比常见图片格式和 base64 图片？

可以将图片转为 Base64 编码，直接将编码放入 CSS 中，即可引入图片

编码后的图片通常比原图大 30% 或更多，但可以与 CSS 一起被 gzip 或 br 压缩

适用小图片和没有权限上传图片的场景，来减少请求，但也应设置代码编辑器不换行或折叠图片编码区域，避免影响 CSS可读性

十、为什么要重置浏览器默认样式，对比 Reset.css 和 Normalize.css?

什么是浏览器默认样式

对于部分HTML标签，如段落、列表，部分表单元素，浏览器会提供默认样式，包含外观及交互，开发者只需引入标签，不需要重复定义这些样式，便于开发

为什么要重置默认样式

不同浏览器，默认样式可能不同，特别是尺寸，位置的不同，让开发者无法统一用户体验，甚至有错位的风险
只使用标签的语义，而不想引入样式
UI稿与浏览器默认样式不同

基于以上，都需要开发者重置或部分重置浏览器的默认样式，以满足开发需求

对比常用的 Reset.css 和 Normalize.css

共同点

两者都能抹平浏览器间的默认样式差异
都部分重置了浏览器默认样式，尤其是内外边距属性

不同点

Reset.css让元素在不同浏览器样式完全一样
Normalize.css适当保留部分浏览器默认样式，只重置影响开发的样式，此外

Normalize.css修复了表单、SVG溢出等BUG

Normalize.css适当提高了可用性

Normalize.css避免大量使用群组选择器，通过注释提高调试体验

最佳实践

对于绝大多数小型项目：

只重置在页面中使用到的标签
只重置有默认属性的属性名
适当保留浏览器的默认样式，如表单的outline