一、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. （六）Jquery Mobile主题及插件的使用

    二.自定义主题      根据js自带的主题,提取出来进行更改 来自为知笔记(Wiz)

  2. c#之时间戳与DateTime的相互转换

    1. 时间戳转 DateTime static DateTime GetServerNow(ulong serverTime) { DateTime dateTimeStart = TimeZone. ...

  3. Linux中cat、more、less、tail、head命令的区别

    一.cat 显示文件连接文件内容的工具 cat 是一个文本文件(查看)和(连接)工具,通常与more搭配使用,与more不同的是cat可以合并文件.查看一个文件的内容,用cat比较简单,就是cat后面 ...

  4. WebRequest调用

    WebRequest支持不同的浏览器对象,可以在底层使用不同的XMLHttpRquest方式调用Web服务. Time.aspx <%@ Page Language="C#" ...

  5. mustache.js使用基本（二）sections

    作者:zccst 本文记录基本使用二,主要讲sections. {{#person}} {{/person}} 1,当person是null, undefined, false, 0, NaN, &q ...

  6. $.extend 用法

    此处参考了RascallySnake 的博客 $.extend(boolean, dest, src1, src2, src3) 第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致 ...

  7. 微信公众号支付开发全过程 --JAVA

    按照惯例,开头总得写点感想 ------------------------------------------------------------------ 业务流程 这个微信官网说的还是很详细的 ...

  8. php 模式

    设计模式1.单例模式类的计划生育1.让该类在外界无法造对象2.让外界可以造一个对象,做一个静态方法返回对象3.在类里面通过静态变量控 class Dog { static $dx; public $t ...

  9. 谈谈Session会话和Cookie

    Session Session在我们的网络应用中就是一种客户端与服务器端保持状态的解决方案 Session对象,就是客户端浏览器与服务器之间建立的互动信息状态.每一个不同的用户连接将得到不同的Sess ...

  10. 2.1. 托管对象模型是什么（Core Data 应用程序实践指南）

    托管对象模型是一种数据结构.在这里,数据结构.纲要.对象图.数据模型.托管对象模型这些术语是一个意思.它们是对同一个东西不同场景的描述.比如,对Core Data 而言是托管对象模型,对设计器来说是对 ...