网格 html { background: #58a; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg…
《css 揭秘》读书笔记
目标 如何用 css 解决难题 收获 尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size: 20px; line-height: 1…
CSS揭秘之《条纹背景》
先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示:也就是说真正的渐变只出现在容器 60%(从20%到80%) 的高度区域 如果把两个色标合在…
CSS揭秘之《灵活的背景定位》
针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移,底部10px偏移有如下几种方式1、原理设置透明边框 div { background: url(../images/code-pirate.s…
CSS揭秘之《边框内圆角》
现在我们要实现一个边框内圆角的效果,效果图如下所示: 第一反应肯定是用两个标签来实现,但是如果只用一层标签的话,可以实现么我们首次的构想可能是这样子的 div { outline: .6em solid green; m…
CSS揭秘之《多重边框》
1、box-shadow还接受第四个参数(称作“扩张半径”), 通过指定正值或负值, 可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过box-shadow来模拟,原理就是一个正值的扩张半径加上两个为…
CSS揭秘之《制作半透明边框》
1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外…
CSS揭秘之《小技巧》
1、在增强网页设计效果时,应该使用生成性内容,而不是依赖冗余的标签和图片。2、要把表单元素的字体设定为与页面的其他部分相同,你并不需要重复指定字体属性,只需利用 inherit 的特性即可3、利用 CSS 自身的机制来组…
【整理】几种解决inline-block间隙的方案
有基础的朋友可以直接跳过序言,直接看方案 序 display有几种属性: inline是内联对象,比如<a/> 、 <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置;block…
【整理】CSS布局方案
我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案话不多说,上代码! 以下所有demo的源码github:https://github.com/zwwill/css-layout/tree/master/…
css/html test1
1,要去掉文本超链接的下划线,正确的是 a {underline:none}a {text-decoration:no underline}a {decoration:no underline}a {text-decor…
css设置垂直居中
css设置垂直居中 元素的垂直居中也是我们日常网页布局中经常会遇到的问题,所以我在此提供一些解决方法,希望可以给予有需要的人一些借鉴和参考. html代码: <div class="parent"> <…