background-attachment          背景图像是否固定或者随着页面的其余部分滚动
background-color                    设置元素的背景颜色
background-image                    把图片设置为背景
background-position               设置图片的起始位置
background-repeat                    设置背景图片是否及如何重复
 
css3新增的背景属性
background-size          规定背景图片的尺寸
设置背景图片的大小
()
background-origin          规定背景图片的定位区域
border-box     从边框开始绘制
content-box     从padding开始绘制
padding-box     从内容开始绘制
background-clip          规定背景的绘制区域
border-box     （包含边框和内边距）
content-box     （边框和内边距都不包含）
padding-box     （只包含内边距，不包含边框）
 
<style>
     div{
          background-color:black;
          border:dashed 15px green;
          padding:30px;
          color:white;
          font-size:30px;
          font-weight:bold;
     }
     .div1{
          background-clip:border-box;
          margin-top:40px;
     }
     .div2{
          background-clip:padding-box;
          margin-top:40px;
     }
     .div3{
          background-clip:content-box;
          margin-top:40px;
     }
</style>
<body>
     <div class="div1">示例1</div>
     <div class="div2">示例2</div>
     <div class="div3">示例3</div>
</body>
 
在一个元素中显示多个背景图片，还可以将多个背景图片进行重叠显示
 
<style>
     div{
          background-image:url("path-andriod.png"),url("img2.jpg");
          background-repeat:repeat-x,no-repeat;
          background-position:100%,100%,center,center;
          width:1000px;
          height:800px;
     }
</style>
<body>
     <div></div>
</body>
 
圆角边框的绘制
border-radius : length length length length ;
使用图像边框
九宫格方式
使用元素的长度或宽度，随时根据内容的变化而变化，根据边框的变化而变化
/*a b c d*/
border-image : url("") 50 50 50 50 ;
3个属性：图片，裁剪位置，重复性
裁剪位置没有单位，专指像素。
而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。
 
 
 
 
 

css3背景与边框相关样式的更多相关文章

  1. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  2. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  3. [CSS3] 学习笔记-背景与边框相关样式

    1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...

  4. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  5. CSS3系列三（与背景边框相关样式 、变形处理、动画效果）

    与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为p ...

  6. css3中的布局相关样式

    web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

  7. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  8. CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

    CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. codevs 3314 魔法森林

    传送门 3314 魔法森林  时间限制: 3 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解   题目描述 Description 为了得到书法大家的真传,小E同学下定 ...

  2. 51Nod 1362 搬箱子 —— 组合数(非质数取模) (差分TLE)

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1362 首先,\( f[i][j] \) 是一个 \( i \) 次多项式: 如 ...

  3. POJ(有向图求LCA)

    Closest Common Ancestors Time Limit: 2000MS   Memory Limit: 10000K Total Submissions: 18013   Accept ...

  4. Code：获取指定汉字的首字母

    ylbtech-Code:获取指定汉字的首字母 1.获取指定汉字的首字母返回顶部 1. /// <summary> /// 获取指定汉字的首字母 /// </summary> ...

  5. android自动连接指定wifi

    public class WifiAutoConnectManager { private static final String TAG = WifiAutoConnectManager.class ...

  6. Docker入门（六）：Stacks

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  7. spring加载hibernate映射文件的几种方式

    1. 在Spring的applicationContext.xml中配置映射文件,通常是在<sessionFactory>这个Bean实例中进行的,若配置的映射文件较少时,可以用sessi ...

  8. 3. docker容器内信息获取、命令的执行、容器的导入和导出

    一.依附容器 依附操作attach通常用在由docker start或者docker restart启动的交互型容器中.由于docker start启动的交互型容器并没有具体终端可以依附,而容器本身是 ...

  9. 使用ffmpeg编码时，如何设置恒定码率，并控制好关键帧I帧间隔

    1. 大家在使用ffmpeg进行视频编码时,使用-b命令,想控制比特率,却发现结果并没有如我们设置所愿,通过码流分析器观察视频码流,码率的波动还是很大的,ffmpeg控制的并不好,这时候,我们可以通过 ...

  10. UIPI VS与Win7 共舞：用户界面特权隔离

    http://tech.it168.com/a2009/0924/737/000000737968.shtml [IT168 专稿]在上文中,我们介绍了操作系统服务的Session 0隔离,通过Ses ...