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. stm32 Bootloader设计(YModem协议) (转)

    源:stm32 Bootloader设计(YModem协议) 相信很多人都希望,不开盖就可以对固件进行升级吧,就像手机那些.下文中的bootload就来实现这样的功能. 前段时间有项目关于Bootlo ...

  2. 第三弹：ZFNet

    在所有深度网络中,卷积神经网和图像处理最为密切相关,卷积网在很多图片分类竞赛中都取得了很好的效果,但卷积网调参过程很不直观,很多时候都是碰运气.为此,卷积网发明者Yann LeCun的得意门生Matt ...

  3. Yaf 使用遇到的坑

    yaf 使用心得: 1.    yaf中使用__get魔术方法后,直接导致模板不能自动渲染,需要手动指定模板 ? 1 $this->getView()->display('index/in ...

  4. lpc1768的rit使用

    LPC1768在系统滴答定时器和通用定时器之外还引入了一个定时器,叫做重复定时器RIT,该定时器只能用于定时操作,带有一个中断,我个人的感觉,这似乎是为了延时函数设计的一个定时器 那么使用该定时器时遵 ...

  5. 怎样判断iOS App是通过哪种途径启动的？

    http://www.cnblogs.com/daguo/p/3759514.html - (BOOL)application:(UIApplication *)application didFini ...

  6. xml--笔记

    1.例子 <?xml version="1.0" encoding="utf-8"?> <!--引用css样式文件--> <?xm ...

  7. C# new和override的区别

    浅析C# new和override的区别 C#中new和override是继承中经常用到的两个关键字,但是往往有时候容易把这两个关键字的作用搞混淆. new C# new关键字表示隐藏,是指加上new ...

  8. [Angular Tutorial] 7-XHRs & Dependency Injection

    我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...

  9. fastreport.net cdoe 自己的代码

      //初始             Report report1 = new Report();             report1.Clear();             string Re ...

  10. js 验证文本框只能输入数字和小数点

    第一步.添加js方法 function check(e) {     var re = /^\d+(?=\.{0,1}\d+$|$)/     if (e.value != "") ...