分类 - CSS

2017-08-30 11:14:47    97    0    0
今天准备把我的博客头像CSS换成菱形的,顺便进行一次CSS练习.在更换的过程中发现了一些问题,写个总结积累一下. 原来的头像是这样的: CSS: #blogPhoto { width: 155px; height: 160px; margin-top: 1px; } #blogPhoto img { display: block; width: 155px; height: 160px; border: 1px solid #f7f7f9; border-radius: 6px; }; 嗯,要做成菱形边框,首先想到的当
2017-08-21 10:29:47    78    0    0
今天已经加班到这个点了,就不总结什么要脑子的复杂东西了,稍微学一个小小的CSShack:双重边框. 地球人都知道怎么写边框: borderx,bordery,borderz... 但是如何写双重边框,就已经能难倒很多人了.为什么? 因为CSS根本就没有双重边框这个属性啊. 如果要实现双重边框又没有这个属性,当然第一反应是使用border-image了.当然当然,这个可以有. 但是在实际的Web开发过程中,我们并不希望增加一个图片的累赘.于是无数前端想了各种八竿子打不着的方法来实现双重边框.比如: box-shadow 如果你百度搜一下,那么肯定就会使用这个方法
2017-08-20 04:04:50    102    0    0
作为一个切图的页面仔,工作中总是要用到垂直居中.忙的时候一般就随便google一个复制粘贴上去,也从来没有思考过内在的联系与原因,但是今天晚上听听音乐想看看书的时候,突然心血来潮.择日不如撞日,就今天吧,夯实一下我的基础,从此让所有垂直居中都变成纸老虎!!! 那么,先谈谈简单的垂直居中吧. 在CSS中想要实现水平居中可以说是十分简单了,行内元素用text-align:center,块级元素用margin:auto,元素就会乖乖的自己跑到元素水平中间去. 但是这么多年下来,垂直居中已经成为了CSS领域的圣杯. 可以说,一个不能解决这个问题的人简直是寸步难行.不管你想做一个怎
2017-08-14 08:02:43    30    0    0
半透明颜色 如何给一个容器设置一层白色背景和一道半透明白色边框? 开始的尝试可能是这样的: border:10px solid hsla(0,0%,100%,.5);background:white; 然而结果却是: 这样就比较奇怪了.为什么边框会消失? 其实,我们的背景是存在的.但是默认情况下,背景会延伸到边框所在的区域下层,这个特性使得我们无法做到使用一个半透明边框. 还好,在CSS3之后,我们有了background-clip.它的初始属性是border-box,这个属性会导致背景被元素的borderbox裁掉.而在把它设置成padding-box之后,浏览器就
2017-08-12 11:14:54    24    0    0
看完CSS揭秘第一章后,感觉自己确实对CSS的了解太过粗浅.谢天谢地,还好没有错过这本神书. 总结 首先,一个好的CSS编写者会提供回退样式. 然后,CSS的编写应该尽量应用DRY(Don't Repeat YourSelf)原则,避免WET(Write Everything twice). 为了检查兼容性,在有兼容性问题的场合应该尽可能的使用element.style来检测CSS兼容性. 样式应用DRY原则的实例: 原样式: padding:6px 16px;border:1px solid #446d88background:#58a linear-grad
2017-08-10 21:29:53    28    0    0
写一个有关于浮动的博文,对自己最近的工作学习做一个总结。 1.什么是浮动? 浮动,CSS中用float定义,顾名思义系列。我个人理解为一个封闭的,装了水的盒子内中的一块泡沫。为什么说是泡沫?首先它可以漂浮起来,水面(非浮动元素)是无视它的。然后它有一定的体积,与水面也有接触,会把其他东西排挤出去(文字环绕等)。最后它在水面之上,所以不在文档流(水面的水流)内。 2.浮动是如何工作的? 浮动的设计初衷是用于浮动图像内的文本块(出自MDN),这一点我认为很重要。那么,所有对浮动的理解都应该不违背这个初衷,否则会造成不必要的学习成本。也许最开始设计浮动的时候根本没有想过
2017-08-10 21:29:53    34    0    0
最近新项目刚上手,自己也比较菜,挺忙。抽空在Dribble上找时钟练习CSS的时候,发现了一个令我很困扰的事情。 一个这样的钟表盘,可以明显看到ICON是图片,那就先不做,把表盘做做练习一下CSS。首先是阴影怎么来的就让我困扰了很久。我实在想不明白怎么通过Box-Shadow呈现这样的阴影效果。苦恼中向公司的老司机请教,他淡淡的说: “你没看出来这所谓的阴影是个长方形吗。” 瞬间感觉自己智商-100.....好吧,原来所谓的阴影是渐变透明长方形,这样瞬间难度就降低N个Level了。 然后坑又来了,正常来说实现阴影部分的重叠只需要使用Z-