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. Python3解leetcode Single Number

    问题描述: Given a non-empty array of integers, every element appears twice except for one. Find that sin ...

  2. windows下VisualStudio和QtCreator搭建Qt开发环境

    一.简介 集成开发平台IDE都有各自的长处,编写Qt程序可根据自己的喜好来选择相应的IDE.下述文章都是装载博友的文章,其中有很多细节还得自己调整. 二.详解 1.VisualStudio搭建Qt开发 ...

  3. Unix Timestamp

    class Foundation_API DateTime /// This class represents an instant in time, expressed /// in years, ...

  4. nodejs写文件

    var fs = require('fs'); 2 var txt = "以上程序使用fs.readFileSync从源路径读取文件内容,并使用fs.writeFileSync将文件内容写入 ...

  5. jquery&nbsp;easyui&nbsp;datebox&nbsp;的使用&nbsp;.

    jquery easyui datebox 的使用 . 分类: jquery-easyui2012-10-09 19:07 266人阅读 评论(0) 收藏 举报 目录(?)[+] 看了jquery e ...

  6. day1 java基础回顾- Properties类与配置文件

    Properties配置文件说明 Properties类对应.properties文件.文件内容是键值对,键值对之间使用"="或空格隔开.开头是"#"的表示注释 ...

  7. 第二课2、ROS

    1.ROS框架 分为以下三个级别: 1)文件系统级 2)计算图级 计算图级是ROS处理数据的一种点对点的网络形式,描述程序是如何运行的. 基本的计算图级概念包括:节点,参数服务器,消息,服务,主题和包 ...

  8. HTML5学习笔记（四）语义元素

    语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...

  9. MS SQL PIVOT数据透视表

    以前曾经做过练习<T-SQL PIVOT 行列转换>https://www.cnblogs.com/insus/archive/2011/03/05/1971446.html 今天把拿出来 ...

  10. python split 与join

    1.string.join (saq):以string 为分隔符,将seq中所有的元素(字符串表示"")合并成一个新的字符串 2.string.split(str="&q ...