PS:注意标题党哦

前言

本章主要介绍CSS3中与背景和边框相关的一些样式，其中包含与背景相关的属性，比如如何在一个元素背景中使用多个图片文件，如何绘制圆角边框以及如何给边框添加图片。

这章的知识点都是很有意义的，是我们一定会用到的知识点，所以学习本章内容后需掌握：

1 背景相关属性：background-clip、background-origin、background-size以及background-break

2 如何在背景中使用多个图片完成负责背景的图像绘制

3 设计圆角

4 图像边框

 

PS：奇葩的一天：

今天算是我工作这么久以来最奇葩的一天，因为今天发生了两件事情：

1 传说中的leader主动找我吵了一架，其实就是想骂我又找不到话说。。。

2 下午面试，只用了五分钟就结束了，而且拿到了offer！

其实根据以上两件事便可以单独成文了，而且会很有意思，但是我们还是要本着我是程序员的态度好好学习，插播到技术文章里吧。。。。

传说中的leader

对于此传说中的leader本来我有一肚子话要抨击之，但真的要说的时候却又感觉无力，我猜是我太善良了吧（当然不是了，今天不在状态，哪天我一定要单独为他写一篇深情并貌的文章！！！）

领导有很多种，我原来在索贝就遇到过2个比较典型的：

小领导扮猪吃虎型，该类领导技术能力非常强，做事干练，而且为人处事很好（认为好）会帮着上面镇压我们！ 虽说如此，对于他们的能力各方面我是非常认可的

大领导深层透彻型，该类领导一般不搞技术，主要技能是忽悠，但你若是认为他只会忽悠就错了，他们有个共同的特征，思维敏捷，目光如炬，比如上面的小领导的花花肠子他一眼就能洞察，对业务亦相当熟悉！

若是上面两个领导可以让你踏踏实实为他打工，甚至压榨了你，你虽说恨虽说怨，但也不得不佩服他们的手腕，那么以下这位就会令你瞠目结舌了！

个人认为他是我所见过最奇葩的人了（注意不是领导，是人！），若是我个人这样认为就算了，主要是团队所有人一致认为他奇葩。。。。

我们暂称他为bgg吧，bgg在这边待了快六年了，自己也是36,7的人了，说实话，你不得不感叹向他这么庸俗的人曾经居然会有机会当上总监！

bgg有以下特点：

1 杀手锏，个人的第一感觉非常好，真的非常好

2 长时间相处下来给人的感觉非常不好，非常不好

3 他是普通员工，他又是“组长”（一个团队是一个小组，几个小组是一个中心，中心有总监，小组有组长，我们团队没有组长，几年了一直没人被正式任命组长，bgg被暗示成为组长，暗示了4年了。。。。）

4 他非常自以为是，非常

5 他非常好胜，什么都要跟你挣个输赢，而且他非常小气，也很记仇。。。。

6 他自以为很nice

7 他很龟毛，生活中有很多策略，并喜欢把这些策略搬到工作中来，搬到代码中来。。。。比如我们饭卡充钱100,200很正常，他是501,499很奇葩

8 他很多理论初听很有道理，细细一想一坨垃圾

9 他是项目经理他也是产品经理，他是团队leader他也是技术人员，但是他管理不好团队，没人服他，他不写详细的需求文档，也也不出原形图，他更加不编码，但是他的思想会进入我们编程过程中的每一个环节

10 主要的来了，他喜欢和领导博弈，甚至是大领导博弈，并且不响应大领导。。。。

......

算了，再写就真的变水文了，因为哪天我会单独写一篇文章来说下这位奇葩的领导！

我们的故事是这样的，团队要解散了，我其实早想走了，在他手下只有死。

然后他主导做的一个项目之垃圾，没人看好，上面也不看好（看好就不会团队解散了），因为要解散了，他会调到其他地方去，他想手里有点资本，于是在这个敏感实际居然是变本加厉的叫我们给他做事（要知道人人都有可能离职，而且不可能再与他在一个团队），好让他过去手里面有点东西，不至于没有筹码，但是这个项目公司类似的产品已经很多了，而且都比这个好。。。。

我们这个项目前后后做了差不多一年了还在做，而且还没有规划，还不知道何时是个头！！！半年前主导的同事就在说不知道在做社么。。。。

你说我一个都要离职的人了，他何苦再来拉着我做我认为什么也不是的东西，虽然他觉得像个宝？？？还叫我为他考虑下，人家上面真正领导意思都叫停了，你这个没意义，他就是不听，给你做，这不打黑工吗？于是，一个简单的功能，差不多一分钟的事情，10个字不到的代码，硬是被我拖了2天，真的不想做啊（其他同事更会拖）！！！

这里大家可能要说我没有职业素养了，但是我已经有职业素养了将近一年了。。。。。。

反正其他老同事早就不了他了，因为我一直对他客客气气的，他居然在离职的时候还想压榨我。。。。这不坑爹吗？

临近中午吃饭的时候，另一个同事叫我吃饭，bgg把我叫住，说这个怎么还没改，哟哟，看着就要变色了哦。

我当时正在写ajax那篇文章，哪个有闲工夫了他哦，我都要离职的人了，于是想草草的应付两句算了，就继续叫同事走。。

哟哟，他可不服气了，又把我叫住，说了一通，脸都红完了，这估计是他发最大火一次了，因为我估计他最近也非常郁闷，他的处境很困难，

过去深圳后水深火热还不知道呢，而且其他同事对他也是不理不睬，其实想想我们为什么要理睬他呢？？？他的任命书在哪，他又不是我们的leader，拿着鸡毛当令箭罢了！

这下好了，火全部发我身上了，我最近心态也出奇的好，根本不来气，又随便应付了两句就拉着同事吃饭去了。。。。。

吃饭回来后，居然又碰到了他，他又是把我叫住，非要跟我争说我没有响应他，我就在想你赢了，我没有响应你又如何呢？于是又是不理不睬的进去了。

回来后，不得了，又是消息，又是邮件的，还把我们的对话截了图，说我没响应他（其实我响应了的，只是他没理解到），完了我就在邮件里面重新截图，

把我响应的话给框了出来，我看他有多好胜呢？

下午时间，我想到我要走了，于是在群里发了一句，是不是要请我吃饭？我猜各位看到这里都天真的笑了吧。。。。（之前除他之外的同事拉了小群，其中一个女同事说他只给了600的预算，团队8人，bgg要出差不来，有同事建议再多要点，反正不是bgg的钱），我刚一发不得了，先是一个老同事发了句“巴菲盛宴”，于是后面每个同事都发了一次。

我期间还说了句“巴菲盛宴啊，真是太好了！！！“，然后心里一阵暗笑。。。。。结果bgg说只有600，好吧600也不错了。。。

于是第一次与leader发生争执结束，请看下一段故事。不在状态居然说了这么多。。。。

5分钟的offer

这个是传奇，这绝对是个传奇，至少是我的奇迹！

与bgg争吵结束后，我继续写着，这篇文章，差不多两点左右完成了，我就开始准备下午一场面试。

说实话，虽说最近还是学习了不少新东西的，但是对于面试来说，心里还是有点没底，因为手里已经有2个offer了，也没那么虚而已。

过去后，填了些基本信息，然后一位35左右的面试官就来了，他进来没做什么事情，就说我要的工资有点高哟（其实我有的offer都那个水平），

然后把手机摸了出来，让我用微信扫一扫，最后出来了个刮奖的页面（就跟我们挂彩票一样），让我说下是怎么实现的。

说实话他这个东西的创意还是很不错的，然后我想了10秒就说了下我的想法，用html5中的canvas api可以实现，但是具体要查资料，

若是向下兼容的话需要用到div遮盖，鼠标或者手滑动的时候去除div就可以了。于是我就回答结束了。

结果他拿着我填的那个表翻了翻，居然问了句，那你好久来上班呢？？？

我诧异的问了句，就没有了？

他说，他比较认可我的能力!（我在想您认可我哪门子能力哟？）

于是此次面试结束！！！

我在想这是我的幸运还是他的幸运呢（潜台词是，他找到人才了哟，呵呵）

然后和hr说了下，便回去公司了，前前后后30分钟都没有，技术只面了5分钟，不算摸手机，配置wifi密码，2分钟。。。。。

PS：题目事后思考：

之后我又详细看了下那道题，第一次划过出来了一点，第二次划过又出来一点，第三次划过又出来一点！

我在想这个效果真心不错，便拿过去给师兄看看，让他猜猜怎么实现的，结果师兄也觉得不错，用手滑动了下，

我无耻的突然发现每次滑动好像减少的痕迹都一样，拿过手机试了试，果然如此！！！这不就是简单的remove div吗？？？？

好了，今天比较兴奋扯远了，现在回到正题吧！

CSS3背景相关

CSS3为我们的背景新增了几个不错的属性：

background-clip 指定背景显示范围background-origin 指定绘制背景图片时的起点background-size 指定背景图片中图片尺寸background-break 指定内联元素的背景图像进行平铺时的循环方式

我们看到，这几个新增属性都是非常不错的属性，实现一些功能时可以帮我们省不少力气！

指定背景的显示范围 background-clip

这个属性我读了下，大概意思便是原来的背景图在padding处便结束了，不会蔓延到border上，但是为该属性指定border或者padding可以让背景到边框上

指定绘制背景图像的绘制起点 background-origin

该属性可以指定背景是有边框开始还是padding处开始，或者内容区域开始。。。。

指定背景的尺寸 background-size

意思是可以像搞img标签似的操作背景。。。

指定内联元素背景图像平铺方式 background-break

该属性有3个值:

bounding-box 背景图像在整个内联元素中平铺

each-box 背景图没一行平铺

continuous 下一行中的图像紧接着上一行中的图像联系平铺

一个元素指定多个背景

这个属性有点意思，值得写个demo，一个元素可以显示多个背景图片，多个背景图片还可以重叠显示，这个真是好东西啊。

1  2  3  4      5      8  9 10 
     
11 12 

 第一个图片在最前边，所以应该是小图片才行哟。

边框相关

圆角 border-radius

传说中的圆角出现，其实都用了不知道多少次了，这里还要写。。。。。记住属性上右下左便可以了，具体应用再说了。。。

边框图片 border-image

略。。。。

结语

不要怪我水，这种文章我其实一般都不会发到首页的，只不过今天两件事情感觉有点搞笑，发出来让大家放松下心情，开始没想到CSS又写不出来东西。

学习CSS不比js，我这边有点提不起干劲，特别是看书时候很多东西都知道，只不过不能运用到一起罢了，

看来CSS还是需要来个完整的图才行啊，明后天水完后，直接在网上找个效果图来做做算了。。。