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 变量输出

    在模板中输出变量的方法很简单,例如,在控制器中我们给模板变量赋值: 大理石平台支架 $name = 'ThinkPHP'; $this->assign('name',$name); $this- ...

  2. thinkphp cbd模式

    ThinkPHP从3.0版本开始引入了全新的CBD(核心Core+行为Behavior+驱动Driver)架构模式,因为从底层开始,框架就采用核心+行为+驱动的架构体系,核心保留了最关键的部分,并在重 ...

  3. UML之类图、时序图、用例图 粗略版介绍

    UML 概述 UML(Unified Modeling Language):统一(标准)建模语言,是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型化和可视化支持,包括由需求分析 ...

  4. [JZOJ 5778] 没有硝烟的战争

    思路: 记\(dp[i][j] = 0/1\)来表示第\(i\)个动物报的数字是\(j\),有无必胜策略. 判断有没有转移就可以了. 输出直接对于每一只动物,看\(dp[i][1->k]\)有没 ...

  5. 关于Delphi中的字符串的详细分析

    关于Delphi中的字符串的详细分析   只是浅浅的解析下,让大家可以快速的理解字符串. 其中的所有代码均在Delphi7下测试通过. Delphi 4,5,6,7中有字符串类型包括了: 短字符串(S ...

  6. range()函数在python3与python2中的区别

    range()函数在python3与python2中的区别 - CSDN博客 https://blog.csdn.net/weixin_37579123/article/details/8098038 ...

  7. LightOJ-1007-Mathematically Hard-欧拉函数打表+前缀和+预处理

    Mathematically some problems look hard. But with the help of the computer, some problems can be easi ...

  8. hdu-4893

    http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意: 给定一个数组a,一开始数组里面的元素都是0,现在有三个操作: 操作1:给第k个数字加上d. 操作2 ...

  9. vue 图片懒加载v-lazy

    搬运自:https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API:https://www.npmjs.com/pa ...

  10. 阶梯nim游戏

    阶梯nim游戏有n个阶梯,0-n-1,每个阶梯上有一堆石子,编号为i的阶梯上的石子只能移动到i-1上去,每次至少移动一个,最后所有的石子都移动到0号阶梯上了.结论:奇数阶梯上的石子异或起来,要是0,就 ...