CSS3 - CSS 常用方案 - 《Web前端学习总结》

一、表单控制
二、表格布局
- 1、border-collapse决定表格边框是否合并
- 2、border-spacing
三、文本内容
四、图片与多媒体
- 1. filter 滤镜属性
- 2. color 的 HSLA
参考

一、表单控制

1. appearance 外观属性

外观属性定义默认情况下元素（尤其是表单控件）的显示方式。通过将该值设置为none，可以使用其他CSS属性完全重新定义默认外观。

*{
  -moz-appearance: none;/* Gecko（Firefox）*/
  -webkit-appearance: none;/* WebKit（Safari）、Blink（Chrome/Opera） */
  appearance: none;/* Now not support <input type="checkbox"> and <input type="radio">. */
}

2. outline、border 轮廓及边框属性

轮廓与边框属性都是相应的 width、style、color 的简写属性，轮廓与边框不同处：

轮廓不占据空间，它们被描绘于内容之上，位于 border 的外围
轮廓可以是非矩形的。在Gecko/Firefox中，轮廓是矩形的，但是Opera则会围绕元素结构绘制非矩形的形状

input{
  outline:none;/* outline-style: none; */
  border:1px solid #ccc;
}

3. box-shadow 盒子阴影属性

盒子阴影属性是向元素显示内部或外部阴影效果的方法，可设置值包括X轴偏移、Y轴偏移、阴影模糊半径、阴影扩散半径、阴影颜色，并以多个逗号分隔。

inset：默认阴影在边框外，即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部，此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下
<offset-x> 正值阴影则位于元素右边；<offset-y> 正值阴影则位于元素下方。如果两者都是0，那么阴影位于元素后面。这时若设置了<blur-radius> 或<spread-radius> 则有模糊效果。需要考虑 inset
<blur-radius>模糊半径用于过渡，值越大模糊面积就越大阴影越淡。不能为负值，默认为0，阴影边缘锐利
<spread-radius>扩散半径。取正值时阴影扩大；取负值时阴影收缩。默认为0，此时阴影与元素同样大
<color>如果没有指定，则由浏览器决定——通常是 color 的值，不过目前 Safari 取透明

3.1 发光效果

input:focus{
    border: none;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

3.2 折叠效果

div{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
    0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2),
    0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

4. ::placeholder 伪元素

::placeholder伪元素表示输入字段中的占位符文本，可向用户提供有关如何填写表单的提示

  input::-webkit-input-placeholder {
    font-weight: 300;
    color: #e6e6e6;
  }
  input::-moz-placeholder {
    font-weight: 300;
    color: #e6e6e6;
  }
  input::placeholder {
    font-weight: 300;
    color: #e6e6e6;
  }

二、表格布局

1、`border-collapse`决定表格边框是否合并

如MDN的 border-collapse 介绍，表格边框若选择合并，则table作为容器的padding失效，则需自己再在 tr 元素上添加间距；表格边框若选择分离，则table作为容器，padding有效。

2、`border-spacing`

如MDN的 border-spacing 介绍，表格相邻单元格边框之间的距离

三、文本内容

1. `-webkit-font-smoothing`字体平滑属性

字体平滑属性用于控制字体渲染时平滑（抗锯齿）效果，只在 Mac OS X 平台下生效。

*{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

2. list-style 列表样式

2.1 Unicode和UTF编码转换

Unicode 是容纳世界所有文字符号的国际标准编码，使用四个字节为每个字符编码。UTF aka Unicode Transformation Format，意为把 Unicode 字符转换为某种格式。

UTF 系列编码方案(UTF-8、UTF-16、UTF-32)可适应不同的数据存储或传递，都可表示 Unicode 标准中所有字符。

UTF-8 使用一至四个字节为每个字符编码，其中大部分汉字采用三个字节编码，少量不常用汉字采用四个字节编码。可变长度的编码方式减少存储占用的空间，所以被广泛使用
UTF-16 使用二或四个字节为每个字符编码，其中大部分汉字采用两个字节编码，少量不常用汉字采用四个字节编码。UTF-16 编码有大小端，即 UTF-16BE 和 UTF-16LE。x86默认 UTF-16LE
- 在编码前会放置一个 U+FEFF 或 U+FFFE（前者代表UTF-16BE，后者代表UTF-16LE）
- U+FEFF 字符在 Unicode 中代表 ZERO WIDTH NO-BREAK SPACE，即其为没有宽度也没有断字的空白
UTF-32 使用四个字节为每个字符编码，使得 UTF-32 占用空间通常会是其它编码的二到四倍。UTF-32 与 UTF-16 一样有大小端，编码前会放置 U+0000FEFF 或 U+FFFE0000 以区分
BOM (Byte Order Mark) 即字节顺序标记，通常叫做大小端。位于文件开始的地方。用于标记高位在前，还是低位在前。有两种形式： BE: Big-Endian, 高位在前，低位在后；LE: Little-Endian, 低位在前，高位在后

2.2 Emoji 转为 Unicode

Emoji 转为 Unicode 常用方法：**encodeURIComponent()**、**codePointAt()**、full emoji list

**encodeURIComponent()**：使用一到四个转义序列表示字符串中各字符，不转义英文字母、数字等：A-Z a-z 0-9 - _ . ! ~ * ‘ ( )。常用于对一个URL中的值或拼接字符进行转义
- 对比：**encodeURI()**使用一到四个转义序列表示字符串中各字符，除以上不转义外，保留或功能字符等不转义： ; , / ? : @ & = +$ # 。常用于对完整 URL 进行 URI Encode
**codePointAt()** 返回给定索引处Unicode code unit or surrogate pair的码点，值为十进制非负整数，可通过 **toString(16)**转换为16进制。Unicode 码点的范围是 0-1114111 (0x10FFFF)。
- 对比：charCodeAt() 返回给定索引处UTF-16 code unit的码点，值为 0 到 65535 之间的十进制整数 ```javascript //UTF-8编码： console.log(encodeURIComponent(“😁”)) // “%F0%9F%98%81” console.log(encodeURI(“😁”)) // “%F0%9F%98%81”

//UTF‑16编码： //【C#】 Encoding.Unicode.GetBytes(“😁”) -> [“3d”, “d8”, “1”, “de”]

//转为 Surrogates：高位代理与低位代理组成一个代理对surrogate pair console.log(“😁”.charCodeAt(0).toString(16)) // “d83d” console.log(“😁”.charCodeAt(1).toString(16)) // “de01”

//UTF-32编码： console.log(“😁”.codePointAt(0).toString(16))//1f601

//测试一个字符由两个字节还是由四个字节组成 function is32Bit(c) { return c.codePointAt(0) > 0xFFFF; }

//JavaScript允许直接用码点表示Unicode字符，写法是”\ + u + UTF‑16编码码点” ‘\u597D’===’好’ // true


<a name="EEtu4"></a>
#### 2.3 list-style 属性
列表样式属性是一个简写属性集合，含 `list-style-type`、`list-style-image`、`list-style-position`。此属性是继承的，可以在父元素（常为<ol>、<ul>）上进行设置，以使其应用于所有列表项
- `list-style-type` 设置列表元素的 marker。如 disc(默认)、space-counter、circle、`**@counter-style**`
   - `**@counter-style**`允许使用自定义计数器样式，如 "\ + UTF‑16编码码点"
   - 可使用 emoji 的 UTF‑16编码码点将 emoji 设置为标记。如`list-style:'\1f601'`显示为😁
- `list-style-image` 指定一个能用来作为列表元素标记的图片。如 url(...)、none(默认)
- `list-style-position`指定标记框在主体块框中的位置。如 inside、outside(默认)
```css
ul{
  list-style:none;
}

3. text-shadow 文本阴影属性

文本阴影可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

<offset-x> 负值阴影位于文字左边。 <offset-y> 负值阴影位于文字上面。两者均为0则阴影位于文字正后方，如果设置了<blur-radius>则会产生模糊效果
<blur-radius>可选，默认为0。值越大，模糊半径越大，阴影也就越大越淡
<color>可选，可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色
```
.red-text-shadow {
 text-shadow: red 0 -2px;
}
```
4. text-decoration 文本装饰属性

文本装饰属性设置文本上装饰线的外观，为 text-decoration-line，text-decoration-color，text-decoration-style，text-decoration-thickness属性的简写。其跨子代文本元素绘制，即子元素无法删除父元素文本装饰。

text-decoration-line : none | underline | overline | line-through，设置装饰类型，可多选
text-decoration-style：wavy | solid | double | dotted | dashed，wavy为波浪线

a{
  outline:none;
    text-decoration:none;
}

5. word-break 单词断行

**word-break** 规定单词内如何断行：normal | break-all | keep-all 。CJK 指中文/日文/韩文

normal：默认断行规则即 CJK 文本断行，Non-CJK 文本短单词可能溢出断行，长单词溢出不断行
break-all：Non-CJK 文本可在任意字符间断行。常用于强制长单词换行
keep-all：CJK 文本不断行。Non-CJK 文本表现同 normal
overflow-wrap 规定长单词溢出时，如何中断换行：normal | break-word。新标准已被 work-break 取代

四、图片与多媒体

1. filter 滤镜属性

filter 滤镜属性通常用于调整图像，背景和边框的渲染。使用滤镜后，某些浏览器可提供硬件加速以实现更好的性能

URL to SVG filter：url(“filters.svg#filter-id”);使用含 SVG 滤镜元素的 URL 引用 SVG 滤镜
Filter Functions：可将filter属性指定为以下函数中的一个或多个。当单个 filter 属性具有两个或多个函数时，其结果将不同于将两个或多个 filter 属性与相同函数分开应用时的结果。
- blur(5px)：应用输入图像高斯模糊。半径值定义屏幕上有多少像素相互融合。值越大越模糊，空白值为0，参数指定为CSS长度，不接受百分比值
- drop-shadow(16px 16px 20px blue)：应用输入图像阴影效果。类似 box-shadow，不允许使用 inset
- hue-rotate(90deg)：应用输入图像色相旋转改变整体色调。“angle”为被调整的色环角度值。色环参考
- saturate(30%)：输入图像的饱和度。0％完全不饱和，100％不变，超过100％超饱和。插值空白值为1
- brightness(0.4)：输入图像线性明亮度。0％全黑，100％不变，超过100％高明亮。插值空白值为 1
- opacity(25%)：输入图像的透明度。0％完全透明，100％不变。插值空白值为1
- contrast(200%)：输入图像的对比度。0％全灰，100％不变，超过100％高对比。插值空白值为 1
- invert(75%)：输入图像内部颜色样本反转。100％完全反转，0％不变。插值空白值为 0
- grayscale(50%)：转换输入图像为灰阶图像。100％完全灰度，0％不变。插值空白值为 0
- sepia(60%)：转换输入图像为棕褐色图像。100％完全棕褐色，0％不变。插值空白值为 0

2. color 的 HSLA

颜色可使用 hsla() 模式，即为色相-饱和度-明度-阿尔法（Hue-saturation-lightness-alpha）模式。

HSLA 相比 RGB 优点：可估算颜色再微调、易于创建相称的颜色集合 ( 色相不变，改变明度、饱和度、透明度 )

色相表示色环的一个角度。该角度无单位。定义 red=0=360，green=120，blue=240，以此类推。
饱和度 由百分数来表示。100% 是满饱和度，而 0% 是一种灰度
明度由百分数来表示。100% 明度是白色，0% 明度是黑色，而 50% 明度是“一般的”
透明度 由0至1的小数表示。0=透明，1=不透明

参考

Unicode与JavaScript详解

CSS 常用方案