《css揭秘》读书笔记（1）-背景与边框

这个笔记只是我读了《css揭秘》后的一些摘要，实现原理并不会讲的很清楚，只是加上了我认为容易记住的部分，当想要实现某一个样式而忘记时，可以参考一下。

1.半透明边框

达到效果

利用rgba的透明化，使边框的颜色变成半透明，但是普通方法设置边框颜色并没有效果，此时可以利用css3的 background-clip属性 调整。这个属性的初始值是 border-box ，说明页面背景会被元素的border box（边框的外延框）裁剪掉，此时只需要设置为 padding-box，这样浏览器就会用内边距的外沿把背景裁剪掉。

css代码

body{background-color: #BAD4AA;
}
div{margin: 20px;width: 300px;height: 200px;background: white;border: 10px solid rgba(255,255,255,0.5);background-clip: padding-box;
}

2.多重边框

利用box-shadow来创建多重边框，它的好处是支持逗号分隔，可以创建任意数量的投影。要注意的一点是，投影是层层叠加的，所以外面一层一定要大于里面一层，而这个所谓的边框就是两者的差值。

css代码

div{margin: 70px auto;width: 300px;height: 200px;background: #eee;box-shadow: 0 0 0 10px red,0 0 0 15px pink,0 0 0 20px green;
}

页面

注意：利用投影产生的【边框】并不能触发事件

3.灵活的背景定位

这次用到的属性是css里的background-position：允许我们指定背景图片距离任意角的偏移量，只需要我们在偏移量前制定关键字。

这个属性不是什么新奇的属性，在我自己做项目的时候也用过，但是这里要记录一个有趣的知识点——就是这里的 left top等是什么意思。

每个元素身上都存在三个矩形框：borderbox（边框的外沿框）

paddingbox（内边距的外沿框）

contentbox（内容区的外沿框）

默认情况下，background-position是以paddingbox为准的，这样边框的颜色就不会遮住背景图片。而改变它则用到了

background-origin

用代码和效果展示更容易明白

当padding为10时

div{padding: 10px;width: 300px;height: 200px;background:  url(../image/1.png) no-repeat #5FB878;background-position: right bottom;background-origin: padding-box;
}

可以看出背景图片并没有实现内边距10px

更改后

div{padding: 10px;width: 300px;height: 200px;background:  url(../image/1.png) no-repeat #5FB878;background-position: right bottom;background-origin: content-box;//只更改了这个属性
}

增加了内边距。

4.边框内圆角

实现效果

也就是在一个方形框里有一个圆角框，一般情况下就是2个div就可以实现，这里不贴代码了。

接下来利用outline和box-shadow实现该样式。

首先可以想到outli用于在一个div外面进行描边增加边框，那我们试试，在一个已经是圆角的div里增加outli属性

效果如下

这时候发现由于边框并不按照圆角描边，就好产生空隙，那如果用box-shadow来填补这些空白，不就实现了想要的样式了吗

注意：该方法实现的条件有2个，1.是描边outline不按照圆角走，2.盒阴影box-shashow按照圆角走（我这里没有证明）。有可能随着w3c的规则更新，这2个条件会发生改变，那么该方法就不适用了

贴上代码

div{margin: 0 auto;width: 60%;background: #B3D1C1;border-radius:.8em;padding: 1em;box-shadow: 0 0 0 5px #A79496;outline: .6em solid #A79496;
}

效果图

5.条纹背景

利用背景颜色渐变的属性实现条纹背景

div{margin: 30px auto;width: 60%;height: 200px;background: linear-gradient(#B3D1C1,#A79496);
}

对于这种普通的渐变，只需要加上范围在颜色后面加上范围 background: linear-gradient(#B3D1C1 50%,#A79496 50%);

就变成了泾渭分明的2个色块，由于是代码产生的图像，可以像背景图像那样对待它。

贴一个w3c的图

三条纹

div{margin: 30px auto;width: 60%;height: 200px;background: linear-gradient(#B3D1C1 33.3%,#A79496 0,#A79496 66.6%,#eee 0);
}

垂直条纹

div{height: 400px;width: 200px;background: linear-gradient(to right, #B3D1C1 50%,#A79496 0);background-size: 45px;
}

《css揭秘》读书笔记（1）-背景与边框相关推荐

css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
CSS揭秘（二）背景与边框
Chapter2 背景与边框 1. 半透明边框基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
css揭秘第二章：背景与边框，自己的学习笔记，如有错误请多指正
1 半透明边框 width: 200px;height: 200px;background: white;border: 10px solid hsla(0, 0%, 100%, 0.5);backg ...
CSS 揭秘-阅读笔记:（Ch5-Ch6）
CSS 揭秘阅读笔记:(Ch5-Ch6) CSS 揭秘阅读笔记:(Ch5-Ch6) Ch5 字体排印 5.20 连字符断行 5.21 插入换行 5.22 文本行的斑马条纹 5.23 调整tab 的 ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
Spring揭秘读书笔记三 bean的scope与FactoryBean
本书可作为王富强所著<<Spring揭秘>>一书的读书笔记第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...
《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
《精彩绝伦的CSS》读书笔记（三）
4.1 轮廓(outline)不参与布局,边框(border)参与布局 4.2 许多初学者(包括我)不了解的:margin:0 auto指的是上下外边距为0,相对父元素水平居中 4.6 相邻清除 cl ...

《css揭秘》读书笔记（1）-背景与边框

《css揭秘》读书笔记（1）-背景与边框相关推荐

最新文章

热门文章