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. Ext4.1 , #Ext4.2

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

  2. (简单) CF 44D Hyperdrive，数学。

    In a far away galaxy there are n inhabited planets, numbered with numbers from 1 to n. They are loca ...

  3. iOS之UITableView的上拉刷新

    #import "ViewController.h" #import "UITableView+PullRefresh.h" @interface ViewCo ...

  4. MYSQL 主从服务器配置工作原理

    一.        主从配置的原理: Mysql的 Replication 是一个异步的复制过程,从一个 Mysql instace(我们称之为 Master)复制到另一个 Mysql instanc ...

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

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

  6. C#webbrowser控件技巧(取得javascript变量值,禁止显示脚本错误)

    C#中的webbrowser控件比较好用. 下面本人搜索整理的几个小技巧. 1. 从C#中取得javascript的变量值. using mshtml;using System.Reflection; ...

  7. Java 之 HTML

    1.HTML a.定义:HTML指的是超文本标记语言 b.特点:HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 c.HTML标签:①通常标签是成对出 ...

  8. Matlab笔记

    提取RGB分量,并显示出来 rgb=imread('mao.jpg'); rgb_r=rgb(:,:,); rgb_g=rgb(:,:,); rgb_b=rgb(:,:,); zero=zeros(, ...

  9. EasyUI--datebox设置默认时间

    1. html代码: <input id="txtBeginTime" class="easyui-datebox" data-options=" ...

  10. java8 stream ,filter 等功能代替for循环

    直接上代码,比较实在. 对象A public Class A{ private Long id; private String userName; ..... ....省略get和set方法 } 在L ...