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 范围标签

    范围判断标签包括in notin between notbetween四个标签,都用于判断变量是否中某个范围. 大理石平台价格 IN和NOTIN 用法: 假设我们中控制器中给id赋值为1: $id = ...

  2. truncate和delete的区别

    TRUNCATE 命令用法 语法    TRUNCATE TABLE name 参数  name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TRUNCATE TABLE 在功能上与不带 W ...

  3. php 取某一日期的前一天

    代码为: $date = “2009-01-01”;$time = strtotime($date) – 3600*24;echo date(‘Y-m-d’,$time); 或者一句:echo dat ...

  4. 解决jquery调用NET webservice跨域的问题

    声明,解决方案由网上收集而来,个人整理.有别人的,也有我的. 一.webserive端 1.web.config 需要在web.config的configuration节点中加入如下的黑体部分内容. ...

  5. windows系统下jupyter notebook使用虚拟环境

    目录 [亲测好使]windows系统下jupyter notebook使用虚拟环境 在虚拟环境中安装jupyter,并添加到jupyter kernel 参考 [未测试,但觉得比上面那方法好,因为上面 ...

  6. python 对excel操作

    在python中,对excel表格读,写,追加数据,用以下三个模块:1.wlrd 读取excel表中的数据2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存.3.xluti ...

  7. vue 利用intersectionOberver实现全局appear/disappear事件

    搬运自:https://juejin.im/post/5cd10959f265da03a00fe5c6 效果: demo地址: https://codepen.io/deepkolos/pen/OYP ...

  8. 【特别篇】NOIP2017划水记

    本文是在精分状态下写的.. 逻辑混乱.. 记忆模糊.. 如果有不符合事实的地方欢迎各位当事人拿出证据指正.. 可能会很啰嗦 很矫情 很zz 不过不要对本蒟蒻进行人身攻击 武力威胁 他还是个宝宝(大雾) ...

  9. 读《深入PHP 面向对象、模式与实践》笔记

    1. include() 和require() 语句的不同在于它们如何处理错误.使用require()调用文件发生错误时,将会停止整个程序;调用include()时遇到相同的错误,则会生成警告并停止执 ...

  10. MySQL数据库CRUD命令用法

    数据库CRUD操作即添加(Create).读取(Read).更新(Update)和删除(Delete). 1. 添加操作也称插入操作,使用Insert语句,Insert语句可以用于几种情况: 插入完整 ...