一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持: 
       FF3.5, Safari 4, Chrome 3

二. border-colors(为边框设置多种颜色)
使用:
       border: 10px solid #000;
       -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明: 
       颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
      FF3+
 
三. boder-image(图片边框)
使用:
       -moz-border-image: url(exam.png) 20 20 20 20 repeat;
       -webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种): 
      repeat --- 边框图片会平铺, 类似于背景重复;
      stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
       FF 3.5, Safari 4, Chrome 3
 
四. text-shadow(文本阴影)
使用: 
       text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
     text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
       FF 3.5, Opera 10, Safari 4, Chrome 3
 
五. text-overflow(文本截断)
使用:
       text-overflow: inherit | ellipsis | clip ;
       -o-text-overflow: inherit | ellipsis | clip;
说明: 
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持: 
       IE6+, Safari4, Chrome3, Opera10
 
六. word-wrap(自动换行)
使用:
       word-wrap: normal | break-word;
支持:
       IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
       -moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+,

Safari 4,
Chrome 3

 

八.   opacity(不透明度)   
使用:
       opacity: 0.5;
       filter: alpha(opacity=50); /* for IE6, 7 */
       -ms-filter(opacity=50); /* for IE8 */
支持:
       all
九. box-sizing(控制盒模型的组成模式)
使用:
       box-sizing: content-box | border-box; // for opera
       -moz-box-sizing: content-box | border-box;
       -webkit-box-sizing: content-box | border-box;
说明:
      1. content-box: 
      使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
      2. border-box: 
      使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
      也不会变).
支持:
       FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素缩放)
使用: 
       resize: none | both | horizontal | vertical;
说明:
       1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效);
       2. 属性值说明:
       (1). none --> 禁用缩放;
       (2). both --> 可同时缩放宽度和高度;
       (3). horizontal --> 仅能缩放宽度;
       (4). vertical --> 仅能缩放高度;
支持:
       safari 4, chrome 3
十一. outline(外边框)
使用:
       outline: 边框厚度 边框样式 边框颜色;
       outline-offset: 偏移值;
说明:
       outline-offset需要独立写, 简写是无效的.
支持:
       FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
       -o-background-size: [length | percentage] {1, 2};
       -webkit-background-size: [length | percentage] {1, 2};
例如:
       -o-background-size: 50px 60px;
       -webkit-background-size: 50px 60px;
       这会将背景图片的宽设置了50px, 高60px.
支持:
       safari 4, chrome 3, opera 10  


十三. background-origin(指定背景图片从哪里开始显示) 
使用: 
       -webkit-background-origin: border | padding | content;
       -moz-background-origin: border | padding | content;  
说明:
       (1) border --> 从border区域开始显示背景;
       (2) padding --> 从padding区域开始显示背景;
       (3) content --> 从content区域开始显示背景;
注意:
       1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前, 
会无效.
支持:
       safari 4, chrome 3, FF 3+         
十四. background-clip(指定背景图片从什么位置开始裁切)
使用: 
       -webkit-background-origin: border-box | padding-box | content-box | no-clip;
说明:
       (1) border-box --> 从border区域向外裁剪背景;
       (2) padding-box --> 从padding区域向外裁剪背景;
       (3) content-box --> 从content区域向外裁剪背景;
       (4) no-clip --> 不裁切背景.
注意:
       1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前, 
会无效.
支持:
       safari 4, chrome 3
十五.  background(为一个元素指定多个背景)
使用: 
       background: [background-image] | [background-origin] | [background-clip] |[background-repeat] | [background-size] | [background-position]
例子:
       background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
       safari 4, chrome 3
十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)
使用:
       hsl: (<length> || <percentage> || <percentage>);
说明:
       (1) length: h(色调),  0(或360)表示红色, 120表示绿色, 240表示蓝色;
       (2) percentage: s(饱和度),  取值为0%到100%之间的值;
       (3) percentage: l(亮度),  取值为0%到100%之间的值;
例子:
       background: hsl(240, 50%, 100%);
       color: hsl(100, 80, 100%);
支持:
       safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
       hsla: (<length> || <percentage> || <percentage> || <opacity>);
说明:
       (1) opacity: a(透明度), 取值在0到1之间;
例子:
       background: hsl(240, 50%, 100%, 0.5);
       color: hsl(240, 50%, 100%, 0.5);
支持:
       safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)
使用:
       rgba: (r, g, b, opacity);
说明:
       (1) r: 红色, 正整数 | 百分数;
       (2) g: 绿色, 正整数 | 百分数;
       (3) b: 蓝色, 正整数 | 百分数;
       (4) a: 透明度, 取值在0到1之间;
       (5) 正整数在0到255之间, 百分数在0%到100%之间.
例子:
       rgba: (100%, 244, 0, 0.5);
支持:
       safari 4, chrome 3, FF3, opera 10

【CSS3】 新增属性的更多相关文章

  1. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  2. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  3. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  4. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  5. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  6. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  7. 第七篇、CSS3新增属性

    <!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...

  8. CSS3 新增属性

    1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是H ...

  9. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

  10. CSS3新增属性2

    阴影 box-shadow:水平偏移 垂直偏移; 偏移可以负值 box-shadow:水平偏移 垂直偏移 颜色; box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/ box-s ...

随机推荐

  1. Js学习04--对象

    1.如何辨别js中的对象 除了五种基本的数据类型,其他的都是对象.万物皆对象. 2.Js中对象的分类 1)内建对象 由ES标准定义的对象,在任何的ES实现中都可以使用. eg:String.Numbe ...

  2. [洛谷P2056][ZJOI2007]捉迷藏(2019-7-20考试)

    题目大意:有一棵$n(n\leqslant10^6)$个点的树,上面所有点是黑点,有$m$次操作: $C\;u$:把点$u$颜色翻转 $G$:问树上最远的两个黑点的距离,若没有黑点输出$0$ 题解:有 ...

  3. 全栈项目|小书架|微信小程序-首页水平轮播实现

    首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...

  4. 未检测到.NET CORE SDK 或者 新建项目没有.NET CORE 3.0选择项

    终于解决了 首先先看自己的VS2019版本 由于楼主下载的 .NET CORE SDK 3.0.100-preview8-013656 焕然大悟 原来是版本不符合,需要用vs 2019 preview ...

  5. Python3 压缩与解压缩(zlib / gzip / bz2 / lzma / zipfile / tarfile)

    本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.csdn.net/Rozol/article/details/72672703 以下代码以Python3.6.1为例 L ...

  6. Keepalived简单理解

    Keepalived Keepalived是一个基于VRRP协议来实现的LVS服务高可用方案,可以利用其来避免单点故障.一个LVS服务会有2台服务器运行Keepalived,一台为主服务器(MASTE ...

  7. VS2017 Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock"): Permission denied fatal: Unable to process path .vs/xxxxxx/v15/Server/sqlite3/db.lock

    具体错误信息:Git failed with a fatal error. error: open(".vs/xxxxxx/v15/Server/sqlite3/db.lock") ...

  8. JavaWeb开发回顾总结【不断更新中】

    1.Java语言编程 2.Servlet & JSP(JavaServer Pages) JSPGet方法中文乱码,以上是我的一篇解决Get方法的文章. 关于编码的约定,从项目的一开始就要规定 ...

  9. HDFS写流程

    HDFS client首先会与NameNode交互元数据信息,然后NameNode制定策略,分配NameNode节点,客户端先会与离自己最近的DataNode进行socket连接,已经与DataNod ...

  10. Centos7机器信息查看

    1.查看Linux信息 1.1查看32位或64位 uname -a 1.2查看内核版本 cat /proc/version 1.3查看发行版 cat /etc/centos-release 2.查看内 ...