一、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. hive第一篇----简介和使用客户端

    摘要by crazyhacking:•Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能.•本质是将SQL转换为MapReduce程序的映射 ...

  2. [转]hibernate三种状态详解

    本文来自 http://blog.sina.com.cn/u/2924525911 hibernate 三种状态详解 (2013-04-15 21:24:23) 转载▼   分类: hibernate ...

  3. 攻入Javascript，究竟什么是AJAX

    什么是AJAX 时隔半年,当AJAX再一次出现在我脑海中时,从最初的模糊到现在的越来越明确.那么究竟什么是AJAX?它和form表单提交有什么区别? 如果你使用过AJAX和表单提交的话,想必会发现一件 ...

  4. mysql的数据类型int、bigint、smallint 和 tinyint取值范围

    使用整数数据的精确数字数据类型.   bigint   从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字 ...

  5. md5sum校验文件完整性

    1.简介 MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改. MD5 全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生 ...

  6. objective-c学习笔记2

    Objective-c学习笔记 1.cocoa的对象初始化一般使用alloc和init两个方法,不适用new,其中alloc用于分配内存,init用于初始化,因为初始化方法返回的对象可能和分配的对象不 ...

  7. php+socket模拟表单发送请求

    <?php /** * http请求类(php + socket) * @todo 这里还有很多未完善的地方,仅有简单的get post head请求 * @author chuangrain@ ...

  8. Java-JNA调用DLL（转）

    源:JNA调用DLL 介绍 给大家介绍一个最新的访问本机代码的Java框架—JNA. JNA(Java Native Access)框架是一个开源的Java框架,是SUN公司主导开发的,建立在经典的J ...

  9. spring DateUtils

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  10. Powerbuilder编程技巧 如何获取网页的HTML源码

    直接使用的三种方式 1.  PB内部对象 Inet object 2.  API 函数 3.  Ole中的Microsfot Web 游览器对象 一.Inet object: 1.Inet objec ...