1.半透明边框

1
2
border: 10px solid hsla(0,0%,100%,.5);
background: white;

上面的代码看似目的是给容器添加一层白色背景和一道半透明白色边框。但是实际上没有达到预想的结果，而是容器全是白色的背景。

因为背景的工作原理就是背景会延伸到边框所在的区域下层，意思就是背景的设置在下层，边框在上层，我们设置的边框透过去看见的还是我们给容器设置的白色，所以看起来当然是没有效果。

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

通过上述方式就达到了我们的目的。background-clip，规定了背景的绘制区域。

background-clip 描述
border-box（默认值) 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

故我们用padding-box实现了一个半透明的边框。

2. 多重边框

box-shadow方案

box-shadow 描述
h-shadow 必须，水平阴影位置，允许负值
v-shadow 必须，垂直阴影位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，内部阴影
  • 注意：
    1. box-shdow的部分不在文档流范围内，不影响布局，不会受box-sizing的影响。
    2. 类似点击事件是点不到的，可以用inset把边框放在内层。
    3. 可以设置多层边框，通过逗号分隔。但是注意阴影是层层叠加的，故多考虑一下多层阴影的spread。

outline方案

  • 优点：
    1. 更加灵活，可以设置虚线等正常边框可以设置的内容。
    2. 可以用outline-offset设置间距，甚至可以是负值。
  • 缺点：
    1. 只能实现一层边框
    2. 暂时不贴合容器设置的圆角。

3. 灵活的背景定位

background-position

1
background-position: right 10px bottom 10px;

上述代码设置了图片靠右10px以及靠下10px；但是该background-position设置3-4个属性的时候有一点兼容性的问题提供一个回退方案。

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

background-position其他基本的使用是所有浏览器支持的

background-origin

每个元素都有三个矩形框，border box，padding box，content box，用background-position中left或者right相对于谁定位呢？默认就是padding box。

但是在css3中通过backgorund-origin可以改变该行为.

background-orign 描述
border-box 背景图像相对于边框盒来定位。
padding-box 背景图像相对于内边距框来定位。
content-box 背景图像相对于内容框来定位。

calc()方案

1
background-position: calc(100% - 10px) calc(100% - 10px);

上述方案注意calc的使用格式以及兼容性问题。

边框内圆角

实现这种情景，外层边框未直角，但是内部边框为圆角

两个div嵌套

外层div不设圆角，内部div设置圆角，轻易实现。

用outline和box-shadow

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

上述代码代码即实现边框内圆角效果，通过outline不会随容器圆角而改变但是box-shadow会改变的原理实现，用阴影填充空隙。注意：outline这一特性可能在今后的版本中改变。

在实践中box-shadow设置0.6em会略微超出outline，按理论来讲不应该，为什么？TODO

5.条纹背景

水平条纹

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

上述代码的原理就是渐变的两个值在相同的位置产生两个没有渐变的颜色，然后每个颜色各占一半，上述就是各自15px，然后repeat，形成条纹。

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

另外，如果某个渐变的位置值比之前的值都小，那么该值会被前面中最大的值替代。上述代码中就是0被设置成30%，这样可以在修改的时候少修改一个值。。。

举一反三，可以设计多种颜色的条纹。

垂直条纹

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

linear-gradient默认的方向是to bottom,如果设置为to right,则形成了垂直的条纹。

斜向条纹

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

先生成四个条纹，再旋转45度，然后repeat即生成了斜向的条纹，可以通过改变background-size的大小改变条纹的宽度。

更好的斜向条纹

上一节的斜向条纹只能是45度的斜纹，repeating-linear-gradient可以解决这个问题。

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

灵活的同色系条纹

如果两个颜色的条纹可以用更简洁的方案，用最深的颜色制定为背景色，把半透明白色的条纹叠加在背景色上得到浅色条纹。

1
2
3
4
background: #58a repeating-linear-gradient(45deg,
                hsla(0, 0%, 100%, .1),
                hsla(0, 0%, 100%, .1) 15px,
                transparent 0, transparent 30px)

复杂的背景图案

网格

1
2
3
background: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0),
                linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 30px 30px;

上述代码利用两个叠加的渐变图案组合而成一个网格。

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

利用原来的背景色，叠加两层横竖的渐变色，形成了用粗细1px的线条绘制的网格。

1
2
3
4
5
6
7
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px, transparent 0);
background-size: 75px 75px, 75px 75px,
    15px 15px, 15px 15px;

通过组合四种不同的渐变值，再配合background-size让repeat的值构建网格。

波点

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

利用径向渐变生成两个颜色，然后repeat，形成波点。

1
2
3
4
background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;

用两个叠加的径向渐变，错开位置生成了更相向的波点。

棋盘

1
2
3
4
5
6
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-size: 30px 30px;
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;

第一组渐变和第二组渐变合成一个正方形，然后复用这两个渐变改变其位置，叠加形成棋盘

1
2
3
4
5
6
7
8
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-size: 30px 30px;
background-position: 0 0, 15px 15px;

第一组渐变形成两个三角形，分别在左下方和右上方，第二次复用这个渐变，改变其位置，形成棋盘。

书中觉得代码量有点多，于是决定用svg的方式可以让代码量减少，甚至可以把SVG文件以data URI内嵌到样式表中。

角向渐变

1
background: conic-gradient(red, yellow, lime, aqua, fuchsia, red);

感觉可以用来做仪表盘的渐变了，hahaha~