一、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. E/WindowState(643): getStack: Window{33f867f8 u0 Starting com.xxxxxx.ooooo}

    Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% ...

  2. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  3. iOS开发——实时监控网速（仅作参考，发现一点问题）

    开发中用到获取网速的地方,应该就两种: 1.下载速度,这种可以直接在接受数据的地方统计计算.这个就不讲了. 2.获取手机网卡的数据,可以监控网卡的进出流量,下面就是. #import "Vi ...

  4. Spring+struts+ibatis(一)环境准备工作

    首先我们先了解几个jar包的作用和一些未曾见过的接口和类 xwork-2.0.7.jar XWork是一个标准的Command模式实现,并且完全从web层脱离出来.Xwork提供了很多核心功能:前端拦 ...

  5. 比较实用的webpack配置代码

    var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...

  6. linux 文件类型识别

    使用 ls -aldrwxr-xr-x. 4 root root 100 Apr 26 15:05 cpulrwxrwxrwx. 1 root root 13 Apr 26 15:05 fd -> ...

  7. 流水线技术原理和Verilog HDL实现（转）

    源:流水线技术原理和Verilog HDL实现 所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执 ...

  8. ZOJ 3331 Process the Tasks

    双塔DP. #include<cstdio> #include<cstring> #include<queue> #include<string> #i ...

  9. linux命令学习-2-dmesg

    DMESG NAME dmesg - print or control the kernel ring buffer(打印或者控制内核环缓冲) Usage: dmesg [options] Optio ...

  10. eclipse控制台中文乱码解决

    Eclipse控制台中的中文输出乱码问题 博客分类: MySql EclipseTomcatXMLWeb  今天做S2SH集成的例子,所有该设置的地方都设置成了UTF-8,包括tomcat的配置文件s ...