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. django 多数据库配置

    在django项目中, 一个工程中存在多个APP应用很常见. 有时候希望不同的APP连接不同的数据库,这个时候需要建立多个数据库连接. 1. 修改项目的 settings 配置 在 settings. ...

  2. 浏览器关闭或刷新事件--window.onbeforeunload

    window.onunload=function(){ //不可以阻止浏览器的刷新或者关闭 return false; } window.onbeforeunload=function(){ //可以 ...

  3. AtCoder Grand Contest 002 F：Leftmost Ball

    题目传送门:https://agc002.contest.atcoder.jp/tasks/agc002_f 题目翻译 你有\(n*k\)个球,这些球一共有\(n\)种颜色,每种颜色有\(k\)个,然 ...

  4. Codeplus2017 12月赛——可做题1

    题目:https://www.luogu.org/problemnew/show/P4030 可以发现一个矩阵是巧妙矩阵当且仅当其所有二阶子矩阵都是巧妙矩阵: 将不巧妙的二阶矩阵计为1,维护二维前缀和 ...

  5. 记一次keepalived脑裂问题查找

    在自己环境做keepalived+Redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...

  6. python list列表sort、sorted、reverse排序

    列表排序:sort是修改原列表,sorted提供原列表的一个有序副本 li=[2,1,4,5,0]li.sort() #默认从小到大print li结果:[0, 1, 2, 4, 5] li=[2,1 ...

  7. SELinux处理命令

    1 查看SELinux状态 Enforcing为开启状态:Disabled为关闭状态. [root@localhost /]# getenforce Enforcing 2 临时关闭SELinux [ ...

  8. 关于ajaxfileupload的使用方法以及一些问题

    使用问题: 1.ajax-fileupload.js handleError 异常 由于本来handleError方法是jquery的方法,但jquery到了某个版本这个方法就去掉了没有了 所以最简单 ...

  9. Tomcat访问程序外的上传文件

    自己在编写程序时,把图片上传到程序根目录下,但是页面使用<img> 没有显示.但是,当我刷新项目下文件夹后,页面刷新可以显示. 我通过网上查询,当在Tomcat下的server.xml配置 ...

  10. Windows server 2003+IIS6+PHP5.3 以上的安装配置

    一.安装好IIS 具体安装方法可查看:http://down.chinaz.com/server/201102/11_1.htm. 二.下载并安装IIS FastCGI 下载地址:http://www ...