css揭秘第二章：背景与边框，自己的学习笔记，如有错误请多指正
date
Apr 5, 2021
slug
css-secrets-ch2
status
Published
tags
CSS
type
Post
summary
css揭秘第二章：背景与边框，学习笔记
1 半透明边框
默认背景是延伸到边框的下层的，但是我们要body的背景从半透明白色边框透上去，可以通过改变background-clip属性的值来处理，这个属性初始值是border-box，是表示背景会被border的外边缘切掉，改成padding'-box会让背景被内边距的外缘裁切掉
2.多重边框
box-shadow方案
box-shadow接受逗号分隔法，可以创建任意数量的投影，但是box-shadow是层层叠加的
- 投影行为和边框并不完全一致，因为它不会影响布局，但是可以通过内边距或者外边距模拟出边框需要的空间
- 上述假边框出现在元素的外圈，并不会影响鼠标事件，比如悬停或者点击
outline 方案
- 比box-shadow要灵活，可以产生类似虚线的效果
- border 和 outline
- outline不占据空间，绘制于元素内容周围。
- 根据规范，outline通常是矩形，但也可以是非矩形的。
border 和 outline 很类似，但有如下区别：
- 另一个好处在于，可以通过outline-offset属性控制它和元素边缘之间的间距，，这个属性可以是负值， outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。
- 它只适用于双层边框的场景
- 边框不会贴合border-radius产生的圆角
灵活的背景定位
难题：希望图片的容器和边角之间流出一定的空隙
background-position方案
用background-position的拓展语法
允许背景图片指定任意角的偏移量，只要在偏移量之前指定关键字，
background-origin 方案
background-position：top left是根据padding box的边缘来讲的，这样边框才不会遮住背景图片，，可以用background-origin来改变默认值，他的值改成content-box这样背景图片会以内容的边缘来作为基准，此时背景距离边角的偏移量就会和内边距保持一致了
calc()方案
如果想让图片定位到距离底边10px且距离右边20px的位置，以左上角偏移来说，就是以下
边框内圆角
有一个边框只要内部有圆角
- 只用一个元素的方法
但是box-shadow的扩张值不一定等于描边的宽度，我们只要能填补缝隙就好，如果据哦张志等于描边宽度会导致UA渲染异常，但是多大的扩张值可以填补空隙？？
大概圆角的一半就可以
条纹背景
水平条纹
如果多个色标（应该就是百分比表示的值）有相同位置，他们会产生一个无限小的过度区域，过渡的起止颜色分别是第一个和最后一个指定值，从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。
因为渐变是一种由代码生成的图像，我们能像对待任何背景图的那样对待它，可以通过background-size来调整尺寸
如果某个色标的位置值比整个列表中在它之前的色标的位置都要小，则该色标的位置值会被设置为它前面所有色标位置的最大值
多个颜色的条纹
垂直条纹
和水平差不多一样，只需要在开头加个参数表示渐变的方向，还要把background-size改变
斜向条纹
改变斜的方向
可见，这是行不通的。
我们需要这样
也可以用linear-gradient的加强版repeating-linear-gradient
同色系条纹
把深色的颜色指定为背景色，把半透明的白色条纹叠加到背景色上来。
复杂的背景图案
网格
网格大小可以调整，网格线条粗细保持固定，下面是使用长度而不是百分比作为色标的场景
两幅图叠加
波点
径向渐变可以创建圆形，椭圆或者是他们的一部分
生成两层圆点图案，把他们的背景定位错开
棋盘
伪随机背景
为了让最小公倍数最大化，这些数字最好是相对质数，最最好选质数，
连续的图像边框
