在学CSS权威指南的时候,就觉得背景边框和浮动是比较难的.还在想,可能是因为自己平时用的少的原因.结果这本书把它排到第一章...简直了
1. 半透明边框
这个在CSS2.1之前可能有点麻烦,但是CSS3里面还是非常好实现的.就是使用RGBA
惟一需要注意的是,要配合背景裁切一起使用,要不然默认看不到效果,因为背景默认是延伸到边框下面的.透明了看不出来
附16进制透明度对照
100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00
2. 多重边框
- 尽量别用多个元素来实现样式效果,避免结构与显示的混乱
- box-shadow
- 可以用逗号隔开使用多次
- 不影响布局
- 不受box-sizing的影响
- 不会响应鼠标事件
测试发现:
- box-shadow会覆盖outline
- outline会覆盖border
3. 灵活的背景定位
- background-position
- 在偏移量前面指定关键字
- 通过background-origin指定偏移起点
- calc计算
- 这个百分比是根据计算后的值来算的,所以即使代码里面没有具体指明width或height,但是实际calc的时候CSS TREE 已经算出值来了
4. 边框内圆角
- 外面的块做背景,里面的块边框圆角一下就行了
- 边框圆角 + 外边框 + box-shadow内补
- 外边框不受圆角影响
- box-shadow的值需要计算一下,具体的见P26
5. 条纹背景
5.1 直线条纹
- 色标位置第2个设置为0,就自动取前一个,在条纹上可放心使用提升DRY
- 通过控制background-size的值再进行限制渐变大小,再循环
5.2 斜线条纹
- 贴片的概念
- 即重复前的图片
- 通过重复4次,再旋转贴片,就可以实现斜条纹
- 如果想要指定宽度的斜条纹,那就要看书上的公式了P30
repeating-linear-gradient方案- 色标无限循环,直到填满整个背景
5.3 灵活的同色系条纹
- 加一个背景色
- 再通过半透明的黑色和半透明的白色来实现深浅交替的效果
- 这种可以避免在修改颜色的时候修改N个地方
现在的问题是,书上讲一个就明白一个,但是自己无法构思出一个新的玩法出来....呜呼哀哉,只能是大师的搬运工,生产不了点子,只能做别人的搬运工
6. 复杂的背景图案
6.1 网格
- 把多个背景图案组合起来,透过彼此的透明区域显示
- 最好是给个背景色,用透明穿透过来,而不是直接给背景颜色
6.2 波点
- 只是换成了径向渐变而已
- 几个月以前,还以为径向渐变是没办法画圆圈的.....惭愧惭愧 jsfiddle.net/ranwawa/ekz…
6.3 棋盘
本来想着还很简单,两个渐变叠加起来就行了.可是行不通.因为渐变是两边无限循环的,最终会导致互相覆盖
这东西完全是考创意啊.打死我都想不出来可以通过三角形来实现....这个就有点尴尬了,所以离算法远一点,现在还要加一条,离审美和创意远一点
老老实实的做一个业务方案实施人员吧.追求高效率,高质量的业务解决能力就行啦.其他的别苛求自己.......那样是不切实际且很伤自信滴,定准方向努力干嘛,冉娃娃
不过作者在实现这个的时候,还是有一套方法可循,就是每一步都用图画下来,有了每一步的图之后,思路就明确了.再来实现代码.但是呢,我的主要方向不在这里,所以就不去记录这个实现步骤了.抄一下代码.实现效果就行了.
这个案例通过svg更加优雅,不过目前暂时不去学svg啦.
7. 伪随机背景
这个是在追求极致的逼真效果了.暂时就先不学这个了吧..大致情况就是,使用一些数字,让人找不到重复背景的规律...尽量模仿自然的随机性
8. 连续的图像边框
8.1 完整的图像边框
还是利用多层背景图的原理,首页要把边框设置成透明,只是要另外设置一下背景裁剪区域
- 裁剪区域默认是border-box
- 图像渲染起始点默认又是padding-box
- 先渲染的背景放在上面的
8.2 信封边框
- repeating-linear-gradient颜色要想被重复,就必须设置成一个色段,
- red 10px, black 10px, black 20px // => red会丢失
- red 0, red 10px, black 10px, black 20px // => ok
用border-image也可以实现,但是相对于background-image来说,会多出一些问题,具体问题就不去验证啦,这里也只记录background-image的方法,心里想吐了都,这完全属于css高阶的内容了吧. 学着好累的感觉... jsfiddle.net/ranwawa/L2g…
8.3 蚂蚁行军边框
这个涉及到一点动画.把动画学完了再来吧.:
踩到的几个坑:
- 多个背景的时候,只能最下层的背景设置背景色,如果在其他层设置背景色,就会报错
- 设置动画position偏移的时候,100% 100%背景没动.是因为百分数是把图片的该位置与背景的该位置重叠,当他是一张全屏的图片时,就没有效果了
- 用45度角的渐变,让四条边都可以显示间断边框这个想法非常巧妙.我一开始就在想,一条渐变怎么顶多只能渲染两条边上有间隔,另外两条边难道是要加第2个渐变来实现?
