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. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. nginx keepalived 主从切换

    注:  LVS + Keepalived  不知道为什么出现一个很郁闷的问题....... ------------------------------------------------------ ...

  3. JavaScript的Cookie操作

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假 设有这样 ...

  4. Spring自学教程-IOC、DI、AOP(二)

    一.spring的IOC-就是怎样使用spring来创建对象 二.springDI(依赖注入)-就是怎样给属性赋值 通过set方式赋值 以下我们只需要记住两点的赋值,基本类型和引用类型的赋值 基本类型 ...

  5. iOS9新特性-3D Touch

    本文主要讲解3DTouch各种场景下的开发方法,开发主屏幕应用icon上的快捷选项标签(Home Screen Quick Actions),静态设置 UIApplicationShortcutIte ...

  6. SpringMVC和mybatis的框架

    1.首先以一个项目做例子,该项目用到的框架即为SpringMVC+mybatis,项目环境为MyEclipse+sqlserver+tomcat6,项目的地址(项目+数据库备份文件)大家可以上我的百度 ...

  7. STM32 对内部FLASH读写接口函数（转）

    源:STM32 对内部FLASH读写接口函数 因为要用内部FLASH代替外部EEPROM,把参数放在STM32的0x08000000+320K处,其中20K是bootloader,300K是应用程序. ...

  8. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  9. width这样读取出来是一个字符串，并且带有单位，但是offsetwidth返回的是一个数值。

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title> ...

  10. S3C2440串口及其中断系统详解

    个独立异步串行I/O(SIO)端口,每个都可以是基于中断或基于DMA模式的操作.换句话说,UART可以通过产生中断或DMA请求来进行CPU和UART之间的数据传输. 字节的FIFO给发送和接收. 字节 ...