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. tcpdump抓包工具用法说明

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...

  2. 《c# 实现p2p文件分享与传输系统》 一、 模型

    c#实现P2P文件分享与传输系统 一.模型 P2P的概念大家都不陌生,也就是所谓的“点对点传输”,即不直接通过服务器,在两台或多台客户端之间传输数据,实现信息交流和资源共享.P2P技术已经发展了很多年 ...

  3. Oracle中的float类型字段

    Oracle中的float类型对应着C#中的decimal类型

  4. nagios客户端安装与配置windows篇

    一.被监控的windows xp客户端的配置 1.安装NSClient++并安装下载地址: http://sourceforge.net/projects/nscplusNSClient++-0.3. ...

  5. Spring boot 学习八 Springboot的filter

    一:  传统的javaEE增加Filter是在web.xml中配置,如以下代码: <filter> <filter-name>TestFilter</filter-nam ...

  6. 【win10激活问题】 从【win10专业工作站版】转为 数字许可证的【win10专业版】

    今天安装了 win10 1903 (10.0.18362 暂缺 Build 18362) 安装时 选的 是[win10 专业工作站版] 却无法激活, (因为当初是从win7升级上win10的,只有关联 ...

  7. [Hadoop]&nbsp;Sqoop安装过程详解

    Sqoop是一个用来将Hadoop和关系型数据库中的数据相互转移的工具,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导进到Hadoop的HDFS中,也可 ...

  8. Javascript中的"\r\n"

    我们知道 \r 代表的是 回车符(ACSII: 13 或0x0d), 也就是"硬回车" \n 代表的是 换行符(ACSII: 10 或 0x0a), 也就是 "软回车&q ...

  9. 7.22实习培训日志-JSP Servlet

    周末总结 今天下午在学习servlet,想自己做一个简单的例子,于是用idea新建一个maven项目,为了后文叙述方便,我们取名为项目1,点击create from archetype,我先选择org ...

  10. POJ 2976 Dropping tests (二分+贪心)

    题意:给定 n 个分数,然后让你去年 m 个分数,使得把剩下的所有的分子和分母都相加的分数最大. 析:这个题并不是分子越大最后结果就越大,也不是整个分数越大,最后结果就越大的,我们可以反过来理解,要去 ...