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. Redis过滤器如何与Envoy代理一起使用

    1.克隆源码到机器 [root@cx-- ~]# git clone https://github.com/envoyproxy/envoy Cloning into 'envoy'... remot ...

  2. C++Builder中注册表的操作

    僮骶头浅5募虻チ耍旅嫖揖鸵砸桓鍪道此得鱐Registry类的用法.首先,先介绍一下TRegistry的属性和方法:TRegistry类一共有四个属性.属性 类型 描述CurrentKey int ...

  3. System.String.cs

    ylbtech-System.String.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5619 ...

  4. Delphi代码创建形式规范 1.0

                Delphi代码创建形式规范 1.0 本规范的目的:给自己的代码一个统一而标准的外观,增强 可读性,可理解性,可维护性 本规范的原则:名称反映含义,形式反映结构 1.单元风格 ...

  5. HTML5 新模块元素兼容问题

    新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, ...

  6. idea存在包但是运行项目一直报java.lang.NoClassDefFoundError的问题

    以前做spark时候遇到过,今天高flink又遇到查了半天,这里记录下 1..idea->file->project structure->libraries->(左侧对话框这 ...

  7. JS规则 自加一，自减一 ( ++和- -) 【mynum = mynum + 1;//等同于mynum++;】

    自加一,自减一 ( ++和- -) 算术操作符除了(+.-.*./)外,还有两个非常常用的操作符,自加一"++":自减一"--".首先来看一个例子: mynum ...

  8. Qt---坐标系统

    Qt中经常会访问鼠标的位置,qt中将坐标分为局部坐标,与全局坐标.局部坐标用pos表示,全局坐标用globalPos表示. pos与globalPos区别: globalPos:widget鼠标所在位 ...

  9. uoj51 元旦三侠的游戏

    题意:询问a,b,n.每次可以a+1或b+1,保证a^b<=n,不能操作者输.问先手是否赢? n<=1e9. 标程: #include<cstdio> #include< ...

  10. uoj279 题目交流通道

    题目:告诉你每两个点之间的最短路距离.构造每条边边权<=m的无向完全图.求有多少种不同边权的图满足最短路限制?n<=400. 标程: #include<cstdio> #inc ...