1、与背景相关的新增属性

包括：backgroud-clip，backgroud-origin，backgroud-size

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         div{
             background-color: black;
             border:dashed 15px green;
             padding:30px;
             color:white;
             font-size: 30px;
             font-weight: bold;
         }
         .div1{
             /*黑色部分从border开始绘制*/
             background-clip: border-box;
         }
         .div2{
             /*黑色部分从padding开始绘制*/
             background-clip: padding-box;
             margin-top:40px;
         }
         .div3{
             /*黑色部分从content开始绘制*/
             background-clip: content-box;
             margin-top:40px;
         }
     </style>
 </head>
 <body>
     <div class="div1">示例1</div>
     <div class="div2">示例2</div>
     <div class="div3">示例3</div>
 </body>
 </html>

2、在一个元素中显示多个背景图片

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         div{
             background-image:url("1.jpg"),url("2.jpg") ;
             background-repeat:repeat-x,no-repeat;
             background-position: 100%,100%,center,center;
             width:600px;
             height:400px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

3、圆角边框的绘制

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         div{
             background-color: green;
             border:3px solid #000;
             width: 300px;
             height: 200px;
             padding:20px;
             border-radius: 20px 30px 10px 50px;
             /*左上角，右上角，右下角，左下角*/
             /*值越大，角越圆*/
         }
     </style>
 </head>
 <body>
     <div>
         示例文字示例文字示例文字示例文字
         示例文字示例文字示例文字示例文字
         示例文字示例文字示例文字示例文字
         示例文字示例文字示例文字示例文字
     </div>
 </body>
 </html>

4、使用图像边框

让边框跟随内容部分自由调整大小

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         div{
             -webkit-border-image:url("1.jpg")50 50 50 60;
             width: 200px;
         }
     </style>
 </head>
 <body>
     <div>示例文字</div>
 </body>
 </html> 

[CSS3] 学习笔记-背景与边框相关样式的更多相关文章

  1. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

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

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

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

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

  4. css3背景与边框相关样式

    background-attachment          背景图像是否固定或者随着页面的其余部分滚动 background-color                    设置元素的背景颜色 b ...

  5. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  7. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  8. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  9. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

随机推荐

  1. MySQL 批量导入 csv 文件

    注意编码一致性,如:我的数据库是utf-8编码,csv文档的编码也是utf-8. 导入使用 LOAD DATA LOCAL INFILE 详细用法请参看文档或者书籍. mysql  user表结构: ...

  2. YII 框架在 MAC OS下 连接数据库失败 提示 DB connection: SQLSTATE[HY000] [2002]

    作者:zccst CDbConnection failed to open the DB connection: SQLSTATE[HY000] [2002] No such file or dire ...

  3. IIS日志路径，修改存放位置，清除日志方法

    IIS存放日志文件的默认存储路径是c:\windows\system32\logfiles 我们依次打开“我的电脑”,C盘,Windows文件夹,system32文件夹,logfiles文件夹,发现里 ...

  4. UIAlertController高级之嵌入其他控件

    在编码过程中,我们经常遇到需要这样一个效果,就是弹出框的嵌套; 举个最简单的例子,比如你要选择时间,必然需要一个时间选择器DatePicker.但是这个选择器又是在你点击某按钮时弹出,弹出方式最常见的 ...

  5. Linux开发IDE打造

    一直以来都是在windows下做开发的,微软提供的IDE  vs开发起来确实快捷高效,接触linux也很久了通常都是使用vim进行一些基础文件的编译,现在突然要转到linux做开发还是不太适应的,网上 ...

  6. iOS调试-LLDB学习总结

    from:http://www.jianshu.com/p/d6a0a5e39b0e LLDB阐述 LLDB 是一个有着 REPL 的特性和 C++ ,Python 插件的开源调试器.LLDB 绑定在 ...

  7. 【Xilinx-Petalinux学习】-02-建立PetaLinux工程

    前面我已经把PetaLinux成功安装到了Ubuntu虚拟机当中了,接下来就要实际操作,将PetaLinux移植到我们自己的硬件平台当中去. step1:硬件描述文件 有两种PetaLinux工程建立 ...

  8. iOS 之 系统机制

    iOS 沙盒 iOS 8 之 新特性 iOS 操作系统整体架构层次讲解

  9. 【蓝牙数据采集模块】-02-Sensor Controller 编写CC2650STK外设驱动

    上次说到把所有的传感器模块在Sensor Controller中实现读写,并封装驱动. 先来看一下CC2650STK的原理图 用红色方框标记的DIO_0~DIO_7, DIO_23~DIO_30是可以 ...

  10. Jenkins搭建Windows slave 环境

      因为之前的接口测试平台是在windows上,后来换了linux,花了半天时间也没有成功,就想着建立一个windows的节点曲线救国   创建WindowsSlave 首先要保证windows和sl ...