HTML5时代看css3新增属性

写在前面的话:

由于CSS3标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各家自标准前加了一个前缀,

如:-moz-主要是firefox火狐

  -webikt-主要是chrome谷歌

  -o-主要是用于苹果浏览器

一.box-shadow(阴影效果)

使用:

box-shadow:20px 10px 0 #000;

-moz-box-shadow:20px 10px 0 #000;

-webkit-box-shadow:20px 10px 0 #000;

支持:

FF3.5,Safari4,Chrome3

二.border-colors(为边框设置多种颜色)

使用:

border:10px solid #000;

-moz-border-botton-colors:#555 #666 #777 #777 #aaa #bbb #ccc;

-moz-border-top-colors:#555 #666 #777 #777 #aaa #bbb #ccc;

-moz-border-left-colors:#555 #666 #777 #777 #aaa #bbb #ccc;

-moz-border-right-colors:#555 #666 #777 #777 #aaa #bbb #ccc;

三.border-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

四.text-shadow(文本阴影)

  使用:

  (1)<颜色>和<模糊半径>是可选的,当<颜色>未指定时,将使用文本的颜色;

  (2)shadow可以是逗号分隔的列表,如:

    text-shadow:2px 2px 2px #FFF, 2px 2px 2px #ccc;

  (3)阴影效果会按照shadow list中指定的顺序应用到元素上

  (4)这些阴影效果有可能相互重叠,但不会叠加文本本身;

  (5)阴影可能会跑到容器的边界之外,但不会影响容器本身的大小。

五.text-overflow(文本截断)

  使用:

    text-overflow:inherit| ellipsis | clip ;

    -o-text-overflow: inherit | ellipsis | clip;

六. word-wrap(自动换行)
  使用:
      word-wrap: normal | break-word;

七. border-radius(圆角边框)
   使用:
       -moz-border-radius: 5px;
     -webkit-border-radius: 5px;

八.  opacity(不透明度)   
   使用:
      opacity: 0.5;
        filter: alpha(opacity=50); /* for IE6, 7 */
      -ms-filter(opacity=50); /* for IE8 */
九. 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, 元素的宽度
         也不会变). 

时间: 2025-01-19 23:01:56

HTML5时代看css3新增属性的相关文章

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问,为什么我把text-overflow拿出来单独讲解.以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段. 但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻. 这篇文章,我讲带领大家做一个<今日头条>新闻导航列表,带领大家领略text-overfow的强大魅力.先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Dem

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

HTML5之表单新增属性

之前已经接触过的新增属性:autocomplete.autofocus.list.multiple.placeholder.required.min.max.step from属性:将表单外的内容与表单进行关联 <form action="" id="kc" > <input type="text" name="dd" form="kc" >(不再form表单中) novalidat

css3新增属性API

写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chrome谷歌和Safari -o-主要是用于苹果机上的浏览器如Opera 下面主要从颜色.文本.选择器等方面来总结一下CSS3新增的属性 颜色 css1和css2只能通过以下三种方式来表示颜色 颜色名称  eg:color:red HEX方式 (语法:#RRGGBB或#RGB   各点的取值范围为00

h5新增标签、css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 prog

h5新增标签及css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main   time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 pr

CSS3 新增属性

1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是HTML和CSS,第二阶段是web2.0的Ajax应用,热门技术是javascrip/DOM/ 异步数据请求.第三阶段是即将迎来的HTML5+CSS3时代,这两者相辅相成,使互联网又进入一个崭新的时代. 2什么是CSS,什么是CSS3? 非常简单,CSS代表"Casading Style Sheets

CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

在CSS3中新增了 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念. 下边是一个使用这三个属性的完整示例代码,及运行后的页面展示效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title