css揭秘--笔记（未完）

超、凢脫俗 2021-11-05 09:10 317阅读 0赞

## 第0章 关于本书 ##

1， 本书要用到一个工具函数————$$()，它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素：

1 function $$(selector,context){
    2   context=context||document;
    3   var elements=context.querySelectorAll(selector);
    4   return Array.prototype.slice.call(elements);
    5 }

2， 以下实现一个效果：

1 linear-gradient(#fff, #000);
    2 linear-gradient(to bottom, #fff, #000);
    3 linear-gradient(to top, #000, #fff);
    4 linear-gradient(180deg, #fff, #000);
    5 linear-gradient(to bottom, #fff 0%, #000 100%);

3， 检查属性是否存在：

1 var root=document.documentElement;
    2 if('textShadow' in root.style){
    3   root.classList.add('textShadow');
    4 }else{
    5   root.classList.add('no-textshadow');
    6 }

检测多个属性：

1 function testProperty(property){
    2   var root=document.documentElement;
    3   if(property in root.style){
    4     root.classList.add(property.toLowerCase());
    5     return true;
    6   }
    7   root.classList.add('no-'+property.toLowerCase());
    8   return false;
    9 }

检测某个具体的属性值是否支持：

1 function testValue(id,value,property){
     2   var dummy=document.createElement('p');
     3   dummy.style[property]=value;
     4   if(dummy.style[property]){
     5     root.classList.add(id);
     6     return true;
     7   }
     8   root.classList.add('no-'+id);
     9   return false;
    10 }

## 第1章 前言 ##

1， 不用-ms-border-radius和-o-border-radius，因为ie和opera从一开始就实现border-radius。  
2， 尽量减少代码重复（DRY：don't repeat youself），在某些值相互依赖时，应把他们的相互关系用代码表示出来。  
例如：行高是字号的2倍，font-size:20px(可使用百分比和em);line-height:2;  
推荐使用hsla而不是rgba来产生半透明白色，因为它的字符长度更短。  
hsla（hue色调0-360，saturation饱和度0-100%，lightness亮度0-100%，alpha透明度0-1）。  
代码易维护和代码量少不可兼得，如border-width。  
currentColor颜色关键字，css有史以来第一个变量，如：hr\{height:.5em,background:currentColor\}。  
3， 使用百分比长度来取代固定长度；  
当需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小分辨率；  
不要忘记给替换元素设置一个max-width:100%;  
当图片以行列式布局时，flexbox或display:inline-block可以实现。  
4， 展开式写法不会帮助你清空所有相关的其他属性。可以组合使用简写和展开式。  
预处理器缺点：css文件体积和复杂度可能会失控，调试难度增加，延时。  
很多受预处理器启发的特性已经融入到原生css中，如calc()，color()。  
如：ul\{--accent-color:red\}  
ol\{--accent-color:blue\}  
li\{background:var(--accent-color)\} 这种在预处理器不能做到。

## 第2章 背景与边框 ##

1，半透明边框：默认情况下，背景会延伸到边框所在区域下面。background-clip:border-box(背景被剪裁到边框盒),padding-box(背景被剪裁到内边框局), content-box(背景被剪裁到内容框)。  
2，多重边框：  
box-shadow方案(水平位置，垂直位置，模糊度，阴影长度，颜色)，可以层层叠加。  
outline方案，如果只需要两层边框，可以先常规边框再加上outline；描边的好处在于可以通过outline-offset控制它跟元素边缘的距离可为负值。  
3，灵活的背景定位：  
background-position:right 20px bottom 10px;回退方案就是把bottom right写入background，默认情况background-position是以padding-box为准的。  
background-origin:content-box，此时背景图片距离边角的偏移量跟内边距一致。  
calc()方案：calc()内部的-和+运算符两侧各家一个空白符，否则会解析错误。  
4，边框内圆角：  
可以用两个元素，还可以用box-shadow（会跟圆角走）和outline（不会跟着圆角走）组合使用，且扩张半径可以取圆角半径的一半（(√2-1)r）。  
5，水平条纹背景：

1 background:linear-gradient(#fb3,#58a);
    2 background:linear-gradient(#fb3 20%,#58a 80%);/*顶部20%和底部20%是实色，中间渐变*/
    3 background:linear-gradient(#fb3 50%,#58a 50%);background-size:100% 30px;/*创建条纹，改变百分数可以创建不等宽的条纹*/
    4 background:linear-gradient(#fb3 33%,#58a 0,#58a 66%,yellowgreen 0);background-size:100% 30px;/*三条纹*/

垂直条纹背景：

background:linear-gradient(to right,#fb3 50%,#58a 0);background-size:30px 100%;

斜条纹背景：

1 background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);background-size:30px 30px;/*这样才能无缝拼接*/
    2 background:repeating-linear-gradient(60deg,#fb3,#fb3 50px,#58a 0,#58a 100px);/*色标无限循环，我们现在在渐变的色标中指定长度*/

同色系条纹：

background:#58a;background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 50px,transparent 0,transparent 100px);

6，网格：

background:#58a;background-image:linear-gradient(white 1px,transparent 0),linear-gradient(90deg,white 1px,transparent 0);background-size:20px 20px;

波点：  
    棋盘：  
7，伪随机背景：  
8，连续的图像边框：

## 第3章 形状 ##

1，border-radius:50%/50%（百分比基于元素尺寸解析，水平、垂直），可以为四个角提供完全不同的水平和垂直半径，如果提供三个值则第四个与第二个相同；如果两个值则第三与第一相同；斜杠前后最多各有四个值。  
2，平行四边形：transform:skewX(-45deg);可使用嵌套元素或伪元素方案使内容垂直。  
3，菱形：

1 transform:rotate(45deg) scale(1.42);/*可将图片放正*/
    2 -webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);/*不用两层标签就可将图片放正并旋转（clip-path不完全支持）*/
    3 img{
        -webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:1s -webkit-clip-path;}
    4 img:hover{
        -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}/*图片平稳过渡（当内边距不够宽时会裁掉文本）*/

4，切角效果：

1 background:linear-gradient(45deg,transparent 30px,#58a 0) left,linear-gradient(-45deg,transparent 30px,#666 0) right;
    2 background-size:50% 100%;
    3 background-repeat:no-repeat;

弧形切角：

1 background:radial-gradient(circle at top left,transparent 30px,#58a 0) top left,radial-gradient(circle at top right,transparent 30px,#666 0) top right;
    2 background-size:50% 100%;
    3 background-repeat:no-repeat;/*（可用scss的mixin解决维护性，不会裁掉文本）*/

内联SVG与border-image解决方案。（文字会折行）  
5，梯形标签页：  
6，简单的饼图：

1 .pie{
        width:200px;height:200px;border-radius:50%;background:yellowgreen;background-image:linear-gradient(to right,transparent 50%,#666 0)}
    2 .pie::before{
        content:'';display:block;margin-left:50%;height:100%;background-color:inherit;border-radius:0 100% 100% 0/50%;
    3 transform-origin:left;animation:spin 3s linear infinite,bg 6s step-end infinite;}
    4 @keyframes spin{
        to{transform:rotate(.5turn);}}
    5 @keyframes bg{
        50%{background:#666;}}

## 第4章 视觉效果 ##

1，单侧投影：box-shadow: 0 10px 4px -4px black;只有底边投影，第四个参数是扩张半径，  
双侧投影：box-shadow: 10px 0 6px -6px black,-10px 0 6px -6px black;  
2，不规则投影：  
3，染色效果：  
基于滤镜：-webkit-filter:\{sepia(1) saturate(4) hue-rotate(295deg)\};sepia是给图片增加一种降饱和度的橙黄色染色效果，saturate提升饱和度，hue-rotate把每个像素的色相进行偏移。  
基于混合模式：div\{background:hsla(335,100%,50%)\};img\{mix-blend-mode:luminosity\};保留上层元素的hsl亮度信息，并从它的下层吸取色相饱和度信息。  
4，毛玻璃效果：-webkit-filter:blur(20px);  
5，折角效果：

## 第5章 字体排印 ##

1，连字符断行：hyphens:manual(none auto);（chrome不支持，应在html标签中指定lang属性）  
2，插入换行：dd::after\{content:'\\A';white-space:pre;\}（不够健壮）  
dd + dt::before\{content:'\\A';white-space:pre;\}  
3，文本行的斑马条纹：background-image:linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);background-size:auto 3em(行高2倍);line-height:1.5;  
4，调整tab宽度：pre标签默认tab-size为8，可用tab-size缩进尺寸，不要用tab键缩进。  
5，连字：font-variant-ligatures。  
6，自定义下划线：text-decoration或boder-bottom或box-shadow:0 -1px gray inset;  
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.02em;  
7，现实中的文字效果：  
凸版印刷效果：color:hsl(210,13%,30%);background:hsl(210,13%,60%);text-shadow:0 1px 1px hsla(0,0%,100%,0.8);在浅色背景使用深色文字时，  
最终确定80%的不透明白色。如果对调，则用深色投影。  
空心字效果：text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;用svg效果更好，但得改html代码。  
文字外发光效果：text-shadow:0 0 .1em white,0 0 .3em 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;  
环形文字效果：利用svg。

## 第6章 用户体验 ##

1，选用合适的鼠标光标：cursor。  
2，扩大可点击区域：Fitts法则认为：人类移动到某个目标区域所需的最短时间是目标距离和目标宽度之比所构成的对数函数。  
border:10px solid transparent;background-cilp:padding-box;  
3，自定义复选框：利用伪元素美化其样式（'\\2714'对勾）  
开关式按钮：与复选框类似。  
4，通过阴影来弱化背景：  
伪元素方案；  
box-shadow方案（box-shadow:0 0 0 50vmax rgba(0,0,0,.8);）；  
backdrop方案：dialog::backdrop\{background:rgba(0,0,0,.8);\}。  
5，通过模糊来弱化背景：filter:blur(5px);  
6，滚动提示：两层背景，一层生成阴影，一层遮挡阴影的白色矩形。  
7，交互式的图片对比控件：  
CSS resize方案：resize:horizontal;  
范围输入控件方案：js控制input\[type='range'\]。

## 第7章 结构与布局 ##

1，自适应内部布局：  
2，精确控制表格列宽：  
3，根据兄弟元素的数量来设置样式：  
4，满幅的背景，定宽的内容：  
5，垂直居中：  
6，紧贴底部的页脚：

## 第8章 过渡与动画 ##

1，缓动效果：  
弹跳动画：css的调速函数是只有一个片段的贝塞尔曲线，因此每个调速函数只有两个控制锚点。  
cubic-bezier(x1,y1,x2,y2)函数允许我们指定自定义的调速函数，把控制锚点的水平坐标和垂直坐标互换就可得到反向版本。  
弹性过渡：  
2，逐帧动画：  
GIF不具备Alpha透明的特性，所以可以用合成png一帧帧显示，然后可用steps()调速函数，如：animation:loader 1s infinite steps(8);  
3，闪烁效果：动画使其颜色变为transparent。  
4，打字动画：让容器宽度成为动画的主体（把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式一个字一个字的扩张到它的宽度）。  
5，状态平滑的动画：  
6，沿环形路径平移的动画：

转载于:https://www.cnblogs.com/colima/p/5682465.html