CSS揭秘（二）背景与边框

Chapter2 背景与边框

1. 半透明边框

基础：了解 RGBA & HSLA 颜色（色调 0~360、饱和度、亮度（0%黑色~100%白色）、透明度）

默认情况下，背景在边框的下层，容器的背景从半透明的边框透上来并覆盖了底层背景，如下图：

（图片均来自于本书所带网站：http://play.csssecrets.io ，感谢作者的付出）

border: 10px solid hsla(0,0%,100%,0.5);
background: white;--------------------------------------------------
background-clip: padding-box; //用内边距的外沿裁剪背景

2. 多重边框

基础：了解 box-shadow 的基本用法，常用于生成投影，可以接受四个参数，两个偏移量，一个模糊值，一个扩张半径，它的好处在于支持逗号分隔语法，可以创建任意数量的投影

要注意的是扩张半径的设置：

background: pink;
box-shadow: 0 0 0 10px #655,0 0 0 15px #357, //第二层的外框宽度实际是5px            0 0 0 25px #384, //第三层宽度实际为10px

如果只需要两层边框，可以用 outline（描边来实现），它的优点在于边框样式十分灵活。

background： pink;
border: 10px solid #655;
outline: 5px solid deeppink; //虚线用dotted

3. 背景定位

以前的定位方式使得图片与容器之间没有空隙，提供三种解决方案

background-position:right bottom;           //默认情况下该属性是以padding box为准的------------------------------------------------------------------------------------padding:10pxbackground:url(xxx.svg) no-reapt #334
background-position:right 20px bottom 10px;   //该属性现已扩张，允许我们在关键字前指定偏移量（1）------------------------------------------------------------------------------------background-orgin:content-box;                              //更改后以内容区的边缘作为基准 （2）------------------------------------------------------------------------------------background-position：calc(100%-20px) calc(100%-10px);  //calc()函数，以左上角偏移的思路考虑（3）

4.条纹背景

规则：A颜色纯色从色带的0开始到20%结束，B颜色从色带80%开始为纯色

background:linear-gradient(#fb3,#58a);
background:linear-gradient(#fb3 20%, #58a 80%); //20%为实色，从顶部开始计算百分比

background-size:100% 30px;//背景默认重复平铺，形成条纹

多色条纹：当第二个色标的位置值为0时，它的位置就会被浏览器调整为前一个色标的位置

同色系条纹：

background: repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);  //修改较繁琐------------------------------------------------------------------------------------------background:#58a;repeating-linear-gradient(30deg,                hsla(0,0%,100%,0.1),                hsla(0,0%,100%,0.1) 15px,                transparent 0,  //表示透明                transparent 30px);

最后附上样式库：http://lea.verou.me/css3patterns/

更多专业前端知识，请上【猿2048】www.mk2048.com

CSS揭秘（二）背景与边框相关推荐

css揭秘笔记——背景与边框
背景与边框半透明边框知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
《CSS揭秘》-背景与边框
1.给一个容器设置一层白色背景和一道半透明白色边框. 思路:实际是设置的背景会延伸到边框所在的区域的下层,可以通过background-clip属性调整背景的默认行为. background-clip ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
CSS 颜色字体背景文本边框列表 display属性
1 颜色属性 <div style="color:blueviolet">ppppp</div><div style="color:#ff ...
CSS边界样式 (背景、边框)
文章目录 :-: border-radius (圆角) :-: box-shadow (阴影) :-: 动图 - Demo :-: border-image 边框背景 :-: background 背 ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
CSS揭秘：6.复杂的背景图案（上）
文章目录前言一.网格 1. 实色网格 2. 边框网格 3. 波点 4. 棋盘小结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背 ...
css背景颜色占全部屏幕,css怎样让背景充满整个屏幕
炫酷时钟 body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图 ...

CSS揭秘（二）背景与边框

CSS揭秘（二）背景与边框相关推荐

最新文章

热门文章