css揭秘

引言

CSS 编码技巧

尽量减少代码重复

可以复用的，大小随父元素变化的button

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

1. 代码易维护 vs. 代码量少

border-width: 10px 10px 10px 0;

order-width: 10px;
border-left-width: 0;

2. currentColor
   inherit 可以用在任何 CSS 属性中， 而且它总是绑定到父元素的计算值（ 对伪元素来说， 则会取生成该伪元素的宿主元素）。

由于color属性可以被继承，所以有的时候只需要在祖元素设置好color属性，其子元素和孙元素都可以使用currentcolor来调用祖元素的颜色。

3. 继承

.callout {
    position: relative;
    margin: 100px auto;
    border: 1px solid #000;
    background-color: #fff;
    line-height: 1.5;
    border-radius: 5px;
    width: 50%;
}

.callout::before {
    content: "";
    position: absolute;
    top: -.45em;
    left: 1em;
    padding: .35em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

相信你的眼睛，而不是数字

关于响应式网页设计

总的来说， 我们的思路是尽最大努力实现弹性可伸缩的布局， 并在媒体查询的各个断点区间内指定相应的尺寸。 当网页本身的设计足够灵活时， 让它变成响应式应该只需要用到一些简短的媒体查询代码。

合理使用简写

你可能知道， 以下两行 CSS 代码并不是等价的：

background: rebeccapurple;
background-color: rebeccapurple

合理使用简写是一种良好的防卫性编码方式， 可以抵御未来的风险。 当然， 如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式， 那就需要用展开式属性，.
CS
展开式属性与简写属性的配合使用也是非常有用的， 可以让代码更加DRY。 对于那些接受一个用逗号分隔的列表的属性（ 比如 background）， 尤其如此。 下面的例子可以很好地解释这一点：

background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;

展开式属性与简写属性的配合使用

background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

background-position 值（哪怕它的值就是其初始值也需要写出来），而且还要使用一个斜杠（/）作为分隔。为什么有些简写的语法如此怪异？
这通常都是为了消除歧义。

我应该使用预处理器吗

• CSS 的文件体积和复杂度
• 调试难度会增加
• 预处理器在开发过程中引入了一定程度的延时

CSS 的原生变量 var()

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

第 2 章 背景与边框

1 半透明边框

border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;

默认状态下，背景会延伸到边框的区域下层
我们可以通过 background-clip 属性来调整背景的位置， 这个属性的初始值是 border-box， 意味着背景会被元素的 border box（ 边框的外沿框） 裁切掉。 如果不希望背景侵入边框所在的范围， 我们要做的就是把它的值设为padding-box， 这样浏览器就会用内边距的外沿来把背景裁切掉。

2 多重边框

1. box-shadow 方案
   一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值， 得到的“投影”其实就像一道实线
   边框

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

box-shadow 的好处在于， 它支持逗号分隔语法， 我们可以创建任意数量的投影。 因此， 我们可以非常轻松地在上面的示例中再加上一道 deeppink 颜色的“边框”

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);

2. outline 方案

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

可以通过 outline-offset 属性来控制它跟元素边缘之间的间距， 这个属性甚至可以接受负值。 这对于某些效果来说非
常有用。 如图 就实现了简单的缝边效果。

background: yellowgreen;
border-radius: 5px;
outline: 2px dashed deeppink;
outline-offset: -10px;

3 灵活的背景定位

1. background-position 的扩展语法方案
   background-position 属性已经得到扩展， 它允许我们指定背景图片距离任意角的偏移量， 只要我们在偏移量前面指定关键字。

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;

回退方案

background: url(code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

2. background-origin 方案

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;

3. calc方案

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

4 边框内圆角

方案一：使用两个元素

<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>

.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}

如果只需要达成简单的实色效果，那我们就还有另一条路可走， 只需用到一个元素 使用box-shadow， outline来实现

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

到底多大的投影扩张值可以填补这些空隙呢？

当我们的圆角半径是 r 时，从圆角的圆心到描边顶角的长度就是r 2 ，这意味着投影的扩张值不能小于 r r 2 ( − = 2 1 − )r

为了避免每次都要计算， 你可以直接使用圆角半径的一半

5 条纹背景

创建等宽的条纹，通过background-size来调整其尺寸：

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

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小， 则该色标的位置值会被设置为它前面所有色标位置值的最大值。”
这意味着， 如果我们把第二个色标的位置值设置为 0， 那它的位置就总是会被浏览器调整为前一个色标的位置值， 这个结果正是我们想要的。

创建不等宽的条纹图案

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

超过两种颜色的条纹

background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

垂直条纹

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

斜向条纹

background: linear-gradient(45deg,
#fb3 50%, #58a 0);
background-size: 30px 30px;

单个贴片包含了四条条纹， 而不是两条， 只有这样才有可能做到无缝拼接。

background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

我们成功地创建了斜向条纹， 但这些条纹看起来要比我们在前面制作的水平和垂直条纹细一些

这意味着， 如果想让条纹的宽度变化为我们原本想要的 15px， 就需要把 background-size 指定为

background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

更好的斜向条纹

repeating-linear-gradient()色标无限循环
可以实现多种角度的条纹背景

background: repeating-linear-gradient(45deg,
#fb3, #58a 30px);

灵活的同色系条纹

不再为每种条纹单独指定颜色， 而是把最深的颜色指定为背景色， 同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹：

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

6 复杂的背景图案

网格

当我们把多个渐变图案组合起来， 让它们透过彼此的透明区域显现时， 神奇的事情就发生了。

background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

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

background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,
transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,
transparent 0);
background-size: 75px 75px, 75px 75px,
15px 15px, 15px 15px;

关于 SVG 图案的演示，请访问https://philiprogers.com/svgpatterns/

波点

径向渐变能够创建的最简单的图案是圆点的阵列

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

我们可以生成两层圆点阵列图案， 并把它们的背景定位错开， 这样就可以得到真正的波点图案了

background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

棋盘

这里的窍门在于用两个直角三角形来拼合出我们想要的方块。

background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
background-size: 30px 30px;

background: #eee;
background-image:
	linear-gradient(45deg,
	rgba(0,0,0,.25) 25%, transparent 0,
	transparent 75%, rgba(0,0,0,.25) 0),
	linear-gradient(45deg,
	rgba(0,0,0,.25) 25%, transparent 0,
	transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

7 伪随机背景

background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

8 连续的图像边框

有时我们想把一幅图案或图片应用为边框， 而不是背景。

border-image 是如何工作的。、
它的原理基本上就是九宫格伸缩法： 把图片切割成九块， 然后把它们应用到
元素边框相应的边和角。

解决方案1

<div class="something-meaningful"><div>
I have a nice stone art border,
don't I look pretty?
</div></div>

.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}

解决方案2

主要的思路就是在石雕背景图片之上， 再叠加一层纯白的实色背景。 为了让下层的图片背景透过边框区域显示出来， 我们需要给两层背景指定不同的 background-clip 值。 最后一个要点在于， 我们只能在多重背景的最底层设置背景色， 因此需要用一道从白色过渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

简写·

padding: 1em;
border: 1em solid transparent;
background:
linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;

老式信封效果

background实现方式

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;

border-image实现方式

padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);

蚂蚁行军

@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}

一个顶部边框被裁切的效果， 就像一般的脚注那样。

border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;

9 自适应的椭圆

自适应椭圆

26 自定义下划线

可以产生更完美的下换线

请注意下划线会会穿过某些字母（比如 p 和 y）的降部。需要下划线在遇到字母时会自动断开避让，假如背景是一片实色，我们可以设置两层与背景色相同的 text-shadow 来模拟这种效果

<body>
  <div style=" font-size: 30px;">
    The only way to <a class="solid" href="">get rid of a temptation</a> is to <a href="">yield</a> to it
  </div>
  <div style=" font-size: 30px;">
    The only way to <a class="dash" href="">get rid of a temptation</a> is to <a href="">yield</a> to it
  </div>
</body>

  a[href] {
      font-size: 30px;
      text-decoration: none;
      background-position: 0 1.15em;
      text-shadow: .05em 0 white, -.05em 0 white;
    }

    .solid {
      background: linear-gradient(gray, gray) no-repeat;
      background-size: 100% 1px;
    }

    .dash {
      background: linear-gradient(90deg,
          gray 66%, transparent 0) repeat-x;
      background-size: .2em 2px;
    }