一、background-clip属性

 <html>
 <head>
     <meta charset="utf-8">
     <title>背景与边框1</title>
     <style type="text/css">
     body{
         background: url('http://csssecrets.io/images/stone-art.jpg');
     }
     div{
         border: 10px solid hsla(0,0%,100%,.5);
         background: white;
         background-clip: padding-box;
         /*如果不加上background-clip属性，则看不到边框*/

         max-width:20em;
         padding:2em;
         margin:2em auto 0;
         font:100%/1.5 sans-serif;
     }
     </style>
 </head>
 <body>
     <div>
         Can I has semi-transparent borders? Pretty please?
     </div>
 </body>
 </html>

上述例子，如果不加入background-clip属性，则看不到边框；这是因为背景会侵入边框所在的范围，这里边框是半透明的，所以看不到边框；当加入了该属性后，背景不能侵入边框，因此能看到。

下面是对该代码中，其他知识点的学习：

1、rgba和hsla

css2中的颜色模式只有rgb(red, green, blue)和16进制（#RRGGBB，RR加起来就是RGB中red的值，GG和BB同）。CSS3中为了增加透明度，又增加了RGBA颜色模式（red, green, blue,alpha）。但是这些表示方式都不直观，最终的颜色是三原色的混合，并不直观，因此CSS3增加了HSL(hue-色调, saturation-饱和度, lightness-亮度)颜色模式和hsla；色调的范围是0~360；饱和度和亮度是用百分数来表示。

2、px，em和rem

px以像素为单位，是相对屏幕分辨率的大小。

em是相对当前对象内文本的大小，例如，当前字体是16px,那么1em就等与16px；

rem是相对当前文档根元素的字体大小，和em有一点区别。

3、sans-serif

css规定了5种通用的字体系列，基本上所有的普通字体都能落入这5个系列，它们是：

serif 有衬线字体族
sans-serif 无称线字体族
cursive 手写字体族
fantasy 梦幻字体族
monospace 等宽字体族

由于这五个系列包含了所有的字体，因此可在css中指定这5个系列的顺序，具体采用什么字体，则由用户电脑上安装的字体而定。

[css]《css揭秘》学习笔记（一）的更多相关文章

  1. 从今天开始 每天记录HTML，CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  2. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  3. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  5. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  6. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. CSS权威指南学习笔记 —— HTML元素分类

    HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...

  9. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  10. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

随机推荐

  1. 如何理解java的引用传递

    1. 数组的引用传递 public class TestArray { public static void changeAry1(int[] ary){ int[] ary1 = {9,9,9}; ...

  2. HDU 5678 ztr loves trees

    这题也是一眼标算..... 先搞一次dfs,把树转换成序列,对每个节点看子树的中位数,也就是看某段区间的中位数,这样就可以主席树求区间第k大值解决. 注意:询问的次数有1000000次,每次去询问会T ...

  3. Openlayers修改矢量要素并且可捕捉

    <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content= ...

  4. (简单) POJ 2253 Frogger，Dijkstra。

    Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...

  5. jquery.mustache.js使用

    作者:zccst jquery.mustache是用jQuery做了一层封装,提供了以下几个方法,让模板使用更便捷. 1,添加模板,使用异步的方式 var viewData = { name: 'Jo ...

  6. 关于安装Windows Live Writer后，内存被占满情况解决

    为了方便写博客,昨天安装了Windows Live Writer2012,但是出现了在安装好后还是正常的,第二天一开机就出现了内存被占满的情况,在资源监视器里看了下也没发现有什么问题.想还是重启一下, ...

  7. LPC1768的看门狗定时器使用

    void wwdg_init(void) { LPC_SC->PCLKSEL0 |= (3<<0);//分频数为八分频 LPC_WDT->WDCLKSEL &= ~(3 ...

  8. 原生JavaScript之“淘宝轮播图”

    轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...

  9. 关于jquery的$each((Object, function(p1, p2)用法

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...

  10. 创建iwatch 程序选项

    include complication :包含自定义表盘事件 include glance scene:包含缩略图事件