background-clip指定了背景可以覆盖到什么范围。
background-origin指定了背景从什么位置开始。
在例子中设置背景平铺应该可以看得清楚些。

CSS3之前的背景，按规定是不会进入到边框的（IE6会污染边框），也就是从border跟padding的交界处开始，跟CSS3中background-origin的默认值一致。
clip会比较有用，毕竟显示背景一般都希望在内容区显示，这样就可以设置padding而不用担心背景会出现在padding区域。

内圆角

方法一：

方法二：

网格

波点

各种不规则形状

CSS3 进阶的更多相关文章

  1. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  2. 【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件

    上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局. 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升, ...

  3. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  4. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  5. 【HTML5&CSS3进阶学习01】气泡组件的实现

    前言 气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...

  6. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  7. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  8. Canvas游戏计算机图形教程

    TechbrooD   主站 WOW 登录   注册 0首页 1简介 1.1WWW 技术变迁和生态 1.2WWW 学习建议 1.3WWW 互联网基础知识 1.4WWW Web 1.5 WWW Web ...

  9. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

随机推荐

  1. thinkphp 空控制器

    空控制器的概念是指当系统找不到请求的控制器名称的时候,系统会尝试定位空控制器(EmptyController),利用这个机制我们可以用来定制错误页面和进行URL的优化. 大理石平台价格表 现在我们把前 ...

  2. 剑指Offer-13：调整数组位置使奇数位于偶数前面

    题目描述: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.例如给定一个数组 ...

  3. helm安装kubernetes的插件istio

    1.安装istio 要使用Helm自定义Istio安装,请使用--set <key>=<value>Helm命令中的选项覆盖一个或多个值 怎么使用选项配置请查看官网https: ...

  4. 将文件大小数值转换成B、KB、MB、GB

    //delphi 将文件大小数值转换成B/KB/MB/GB function FormatByteSize(const bytes: Longint): string; const B = 1; // ...

  5. JS调用C++

    1.注册C++函数. //注册回调函数宏 //根据不同需要支持注册两个函数原型,注意CONNECT_JS_CALL_SIMPLE_HANDLER中注册的函数 //需要提前和HTML调用协调好,参数必须 ...

  6. 2816: [ZJOI2012]网络

    传送们 把一个点拆成c个即可 浪费时间的水题．．． //Achen #include<algorithm> #include<iostream> #include<cst ...

  7. SPSS数据编辑器界面 度量 名义 序号 标签

    SPSS数据编辑器界面 度量 名义 序号 标签 变量视图:变量视图用于管理变量的属性,包括变量名称,类型,标签,缺失值,度量标准等属性. 数据视图:数据视图用于管理录入的数据,一行表示一条记录在不同变 ...

  8. PAT甲级——A1137 Final Grading【25】

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...

  9. File、FileFilter、递归初步

    java.io.File 文件和目录 路径名的抽象表示形式 文件:File 存储数据的 目录:Directory 文件夹 用来存储文件 路径:Path 定位具有平台无关性 在任意平台都可以使用 Fil ...

  10. 使用CEfSharp之旅（2） js前台事件执行后台方法

    原文:使用CEfSharp之旅(2) js前台事件执行后台方法 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blo ...