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. Astyle 快速入门，常用指令

    --style=java -n -p -c !E astyle是一个命令行工具,命令语法很简单:          astyle [options] < original > Beauti ...

  2. URL类发送请求

    import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...

  3. Python自学--part1

    概要 Python介绍 Python安装 Hello World程序 变量 字符编码 用户输入 pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语句 表达式while 循环 表达 ...

  4. 面试系列20 生产环境中的redis是怎么部署的

    redis cluster,10台机器,5台机器部署了redis主实例,另外5台机器部署了redis的从实例,每个主实例挂了一个从实例,5个节点对外提供读写服务,每个节点的读写高峰qps可能可以达到每 ...

  5. C# 16进制与字符串、字节数组之间的转换（串口通讯中）

    1.c#中如何将十进制数的字符串转化成十六进制数的字符串//十进制转二进制 Console.WriteLine("十进制166的二进制表示: "+Convert.ToString( ...

  6. android-启动另外一个Activity

    启动另外一个Activity 在完成了上一节课的学习后,我们已经创建了一个带有text输入框和一个button的app. 在本课中,我们将在MainActivity类中添加SendButton的单击响 ...

  7. Android开发 MediaPlayer将视频播放时尺寸适配完美

    前言 视频播放有一个较为蛋疼的问题,那就是尺寸适配.如果不做尺寸适配视频将会变形拉伸或者压缩.下面我就介绍个人实现的算法. 满足一边的算法 满足一边?你可能是疑问是什么意思.意思是就是始终将视频的高度 ...

  8. CF755F PolandBalls and Gifts

    题意:给你一个礼物的置换.有k个人忘带了礼物.一个人无法获得礼物为他自己没有带礼物或给他带礼物的那个人没有带礼物.求选择k个人,没有获得礼物的人数的最小值和最大值. n,k<=1e6. 标程: ...

  9. CentOS安装tomcat并且部署Java Web项目具有一定的参考价值

    本篇文章主要介绍了CentOS安装tomcat并且部署Java Web项目,具有一定的参考价值,有需要的可以了解一下.(http://m.8682222.com) 1.准备工作 b.因为tomcat的 ...

  10. js 类数组转化数组

    一.常见类数组集合 (1).arguements function fn(){ var arr = [].slice.call(arguements,0); } (2).HTMLCollection  ...