【CSS3初探之背景边框相关】奇葩的与老大吵了一架,奇葩的五分钟offer,奇葩的一天。。。

  1. 云栖社区>
  2. 博客>
  3. 正文

【CSS3初探之背景边框相关】奇葩的与老大吵了一架,奇葩的五分钟offer,奇葩的一天。。。

范大脚脚 2017-12-20 11:54:00 浏览786
展开阅读全文
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争吵结束后,我继续写着【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?,这篇文章,差不多两点左右完成了,我就开始准备下午一场面试。

说实话,虽说最近还是学习了不少新东西的,但是对于面试来说,心里还是有点没底,因为手里已经有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 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         div { background-image: url("y.jpg"), url("s.jpg"); background-repeat: no-repeat, no-repeat; 
width: 800px; padding: 490px 0px; background-position: -800px 0,  right top;}
 7     </style>
 8 </head>
 9 <body>
10 <div></div>
11 </body>
12 </html>
复制代码


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

边框相关

圆角 border-radius

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

边框图片 border-image

略。。。。

结语

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

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

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

 


本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/24/3041187.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注