CSS学习笔记（六）形状（二）
十、平行四边形提出问题
平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。
有没有办法只让容器的形状倾斜，而保持其内容不变呢？
解决方案嵌套元素方案
以对内容再应用一次反向的 skew() 变形，从而抵消容器的变形效果。
123<a href="#yolo" class="button"> <div>Click me</div></a>
12.button { transform: skewX(-45deg); }.button > div { transform: skewX(45deg); }
伪元素方案
把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。
一个简单的办法是给宿主元素应用 position: relative 样式，并为伪元素设置 position: absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
同时设置z-index：-1样 ...
CSS学习笔记（五）形状（一）
九、自适应的椭圆提出问题
如果它的宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆。
解决问题
border-radius：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可。
同时，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。
123div{ border-radius: 50%;}
半椭圆
border-radius是一个简写属性。我们可以为元素的每个角指定不同的值，而且还有两种方法可以做到这一点。第一种方法就是使用它所对应的各个展开式属性：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
一次性提供用空格分开的多个值。
如果我们传给它四个值，这四个值就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。
如果我们提供的值少于四个，则它们会以 CSS 的常规方式重复，类似于 bor ...
CSS学习笔记（四）背景与边框（四）
七、伪随机背景
通过质数来增加随机真实性。
1、问题提出
自然界中的事物都不是以无限平铺的方式存在的。即使重复，也往往伴随着多样性和随机性。
当你注意到一个有辨识度的特征（比如，木纹上的节疤）在以固定的规律循环重复时，那它试图营造的自然随机性就会立刻崩塌。
重现大自然的随机性是一个挑战，因为 CSS 本身没有提供任何随机功能。
2、解决方案
把这组条纹从一个平面拆散为多个图层：一种颜色作为底色，另三种颜色作为条纹，然后再让条纹以不同的间隔进行重复平铺。
操作步骤：
创建指定宽度的条纹；
使用background-size来控制条纹的间距。
12345678#pic{ background: hsl(20, 40%, 90%); background-image: linear-gradient(90deg, #fb3 10px, transparent 0), linear-gradient(90deg, #ab4 20px, transparent 0), linear-gradient(90deg, #655 ...
CSS学习笔记（三）背景与边框（三）
六、复杂的背景图案
水平渐变图案跟垂直渐变图案配合实现简单的蓝图网格图案。
0、知识点
linear-gradient(direction, color-stop1 position, color-stop2 position, …)：
用于创建一个表示两种或多种颜色线性渐变的图片。
direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…：用于指定渐变的起止颜色。
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
1、网格
把多个渐变图案组合起来，将其透过彼此的透明区域显现。
12345678div{ background: white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient( ...
CSS学习笔记（二）背景与边框（二）
五、条纹背景难题
不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。
要想在网页中实现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。
可能有人试过用 SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法也远远不够友好。
如果可以直接在 CSS 中创建条纹图案，那该有多棒啊！你可能会惊讶地发现，我们居然真的可以。
解决方案
假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a。
123div{ background: linear-gradient(#fb3, #58a);}
现在，让我们试着把这两个色标拉近一点。
123div{ background: linear-gradient(#fb3 20%, #58a 80%);}
现在容器顶部的 20% 区域被填充为 #fb3 实色，而底部 20% 区域被填充为 #58a 实色。真正的渐变只出现在容器 6 ...
CSS学习笔记（一）背景与边框（一）
123456789101112131415161718192021222324<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: rgb(78, 78, 85); } #pic{ width: 300px ...
JavaScript学习笔记（四十八）网络请求与远程资源（四）
Web Socket
Web Socket (套接字)的目标是通过一个长时连接实现与服务器全双工、双向的通信。
1、API
要创建一个新的WebSocket，就要实例化一个WebSocket对象并传人提供连接的URL。
必须给WebSocket构造函数传人一个绝对URL。
1let socket = new WebSocket("ws://www.example.com/server.php");
同源策略不适用于Web Socket，因此可以打开到任意站点的连接。
至于是否与来自特定源的页面通信，则完全取决于服务器。(在握手阶段就可以确定请求来自哪里。)
浏览器会在初始化WebSocket对象之后立即创建连接。
与XHR类似，WebSocket也有一个readyState属性表示当前状态。不过，这个值与XHR中相应的值不一样。
WebSocket对象没有readystatechange 事件，而是有与上述不同状态对应的其他事件。readyState值从0开始。
任何时候都可以调用close()方法关闭Web Socket连接，调用close()之后 ...
JavaScript学习笔记（四十八）网络请求与远程资源（三）
五、Fetch API
Fetch API则必须是异步
1、基本用法
fetch()方法是暴露在全局作用域中的，包括主页面执行线程、模块和工作线程。
1）分派请求
fetch()只有一个必需的参数input。多数情况下，这个参数是要获取资源的URL。
这个方法返回一个期约。
12let r = fetch('/bar'); console.log(r); // Promise <pending>
请求完成、资源可用时，期约会解决为一个Response对象。
这个对象是API的封装，可以通过它取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载转换为有用的形式。
12345fetch('bar.txt') .then((response) => { console.log(response); }); // Response { type: "basic", url: ... }
2、读取响应
读取响应内容的最简单方式是取得纯文 ...
JavaScript学习笔记（四十八）网络请求与远程资源（二）
三、跨源资源共享
跨源资源共享(CORS, Cross-Origin Resource Sharing)定义了浏览器与服务器如何实现跨源通信。
CORS背后的基本思路就是使用自定义的HTTP头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。
对于简单的请求，比如GET或POST请求，没有自定义头部，而且请求体是text/plain类型，这样的请求在发送时会有一个额外的头部叫Origin。Origin头部包含发送请求的页面的源(协议域名和端口)，以便服务器确定是否为其提供响应。
现代浏览器通过XMLHttpRequest对象原生支持CORS。
要向不同域的源发送请求，可以使用标准XHR对象并给open()方法传入一个绝对URL。
跨域XHR对象允许访问status和statusText属性，也允许同步请求。
跨域XHR对象有以下额外限制：
不能使用setRequestHeader()设置自定义头部。
不能发送和接收cookie。
getAllResponseHeaders()方法始终返回空字符串。
1、预检请求
CORS通过一种叫预检请求的服务器验证机 ...
JavaScript学习笔记（四十八）网络请求与远程资源（一）
一、XMLHttpRequest对象1、使用XHR
open()方法
接收3个参数：请求类型、请求URL、表示请求是否异步的布尔值。
调用open不会实际发送请求，只是为发送请求做好准备。
send()方法用于发送定义好的请求
方法接收一个参数：作为请求体发送的数据。
该请求为同步请求，JavaScript代码会等待服务器响应之后再继续执行。
123let xhr = new XMLHttpRequest(); xhr.open("get", "example.php", false); xhr.send(null);
收到响应后，XHR对象的以下属性会被填充上数据。
收到响应后，第一步要检查status属性以确保响应成功返回。
一般来说，HTTP 状态码为2xx表示成功。此时，responseText 或responseXML (如果内容类型正确)属性中会有内容。
如果HTTP状态码是304，则表示资源未修改过，是从浏览器缓存中直接拿取的。当然这也意味着响应有效。
XHR对象有一个readyState属性，表示当前处 ...
