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. html精确定位

    1.offsetwidth.offsetHeight是指包含border的元素宽高. 2.clientWidth.clientHeight是指不包含border的元素宽高. 3.scrollWidth ...

  2. Ext4.1 , #Ext4.2

    在类中定义url 和 在参数中定义url不同 Ext4.1 和 Ext4.2 处理上有较大的区别

  3. iOS JsonModel

    iOS JsonModel 的使用 本文转自:http://blog.csdn.net/smking/article/details/40432287 下面讲一下JSONModel的使用方法. @in ...

  4. NSMutableDictionary

    NSDictionary *dic = @{@"name":@"yj", @"age":@"24", @"ho ...

  5. HDU 2859 Phalanx

    简单二维dp.o(n^3)效率过的.不知道有没有o(n^2)的解法. 为了方便点,先左右交换一下. dp[i][j]表示以[i,j]为左上角的最大对称矩阵长度 那么dp[i][j]=min(Max,d ...

  6. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  7. UIImageView控件

    UIImageView是用于显示图像的,在iOS开发中,我们无需专门去写什么代码,不需要检查设备的类型,只需要把1x.2x.3x的图像添加到项目中,图像视图会自动的在正确的时间加载正确的图像. (1) ...

  8. IOS开发之IOS8.0最新UIAlertController

    最近苹果更新的IOS8 对以前进行了很大的修改, 更新的API也让人捉急,据说iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.比如全新的UIPrese ...

  9. C#数码管控件（转）

    源:一个简单Led控件 Led控件,可能是非常经典和常用的了,但是很遗憾的是,这个名称至少涵盖了三种控件:1.是7段式的有发光二极管构成的Led,通常用来显示数字.2.是指示灯,通常用来闪烁,指示电源 ...

  10. js prototype 和constructor

    1.function 和object 都有 constructor 和prototype 2. var a=new Animal() (animal 是function或Object) a 有 con ...