一、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. boost库使用说明

    1 下载安装 2 编译的时候,需要添加头文件和链接对应的库

  2. (中等) HDU 5046 Airport ，DLX+可重复覆盖+二分。

    Description The country of jiuye composed by N cites. Each city can be viewed as a point in a two- d ...

  3. (简单) POJ 1562 Oil Deposits，BFS。

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  4. Android开发之回调函数

    写在前面,最近对回掉函数有了更深刻的认识,现在记录如下.由于在家看不到底层代码,在公司不能访问外网,现在只能凭靠记忆写这篇博文了,写错的地方还希望大神们指出来 其实给组件设置监听就是最典型的回掉函数的 ...

  5. FFT算法的完整DSP实现（转）

    源:FFT算法的完整DSP实现 傅里叶变换或者FFT的理论参考: [1] http://www.dspguide.com/ch12/2.htm The Scientist and Engineer's ...

  6. Android L（5.0）源码之手势识别OnTouchListener

    在Activity中,因为要监听触摸屏的触摸事件和手势时间,所以该Activity必须实现OnTouchListener和OnGestureListener两个接口,并重写其中的方法.本人根据andr ...

  7. 医院his系统数据库恢复

    医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类.  某医院HIS系统SQL2008数 ...

  8. 笔记-Python基础教程（第二版）第一章

    第一章 快速改造:基础知识 01:整除.乘方 (Python3.0之前 如2.7版本) >>> 1/2 ==>0 1/2整除,普通除法: 解决办法1: 1.0/2.0  ==& ...

  9. 10-instanceof

    在Java中可以使用instanceof关键字判断一个对象到底是不是一个类的实例 package com.example; class A{ void tell1(){ System.out.prin ...

  10. Djanto static静态文件配置

    django的settings中包含三个static相关设置项: STATIC_ROOT STATIC_URL STATICFILES_DIRS   STATIC_URL 好理解,就是映射到静态文件的 ...