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. 【Lintcode】013.strStr

    题目: For a given source string and a target string, you should output the first index(from 0) of targ ...

  2. JSOI2008星球大战——联通块数量

    题目:https://www.luogu.org/problemnew/show/1197 此题不能按时间顺序进行删点.求连通块数量,而应打破时间的思维,先形成一张没有要删去的点的图,再从后往前逐个加 ...

  3. DBS：目录

    ylbtech-DBS:目录 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶 ...

  4. 关于java中equals与==的区别的小实验

    java中equals与==经常容易混淆,简单一点说就是equals比较的是值是否相等,是一种方法,==比较的两个对象在JVM中的地址,是一种操作符. 做了几个小实验比较结果. 实验一: String ...

  5. C#Dos命令

    记下 打开IIs:按Win+R键,输入inetmgr ; 远程桌面:按Win+R键,输入mstsc; 启动服务:按Win+R键,输入inetmgr; 删除某服务:sc delete [ServerNa ...

  6. [poj3368]Frequent values(rmq)

    题意:给出n个数和Q个询问(l,r),对于每个询问求出(l,r)之间连续出现次数最多的次数. 解题关键:统计次数,转化为RMQ问题,运用st表求解,注意边界. 预处理复杂度:$O(n\log n)$ ...

  7. EasyUI把datagrid的值赋给表单

    $('#infoForm${INDEX}').form('load', rowToDto(pageConfig${INDEX}.infoName, row)); function rowToDto(i ...

  8. unix环境高级编程附录 B 通用代码

    0.说明: 在测试 unix 环境高级编程中的代码时,需要一些作者事先写好的代码, 如: apue.h 包含某些标准系统头文件,定义许多常量及函数原型 还有两个作者自编的函数来对错误进行处理 1.ep ...

  9. CI框架3.0版本以后，前后台分离的方法。

    笔者认为,CI框架官方其实并没有考虑这个前后台分离的问题,所以没有官方的分离方法.而且,2.0版本的分离,也被官方认为这是一个bug.所以在前后台分离这个问题上,其实并不如thinkphp框架. 在C ...

  10. Working Experience - WPF 中 DataGrid 控件的应用

    问题: 添加控件后, 编辑单元格会出现异常 绑定 ItemsSource 属性后, 更新绑定对象的数据, UI 不刷新 如何显示控件中 ComboBox 类型 解决方法: 绑定 ItemsSource ...