前端必须要掌握的几个CSS3的属性

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。

1. Border-radius

Border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

2. Box-shadow

接下来是非常普遍的Box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数

  1. x-offset x轴偏移
  2. y-offset y轴偏移
  3. blur 模糊值
  4. color of shadow 阴影颜色

现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

Box-shadow

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

<div>
   <img src="tuts.jpg" alt="Tuts" />
</div>

The CSS

.box:after {
   content: ‘‘;
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%;
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

3. Text-shadow

Text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

  1. x-offset 水平位移
  2. y-offest 垂直位移
  3. blur 模糊值
  4. color of shadow 阴影颜色
 h1 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }

Text-Outline和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当Webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很美观）。

4. Text-Stroke

使用这个方法时要注意了，只有Webkit（Safari， Chrome， iPhone）在最后的几年内还支持这个属性。其实，虽然我可能是错的，Text-stroke还不属于CSS3范畴的一部分。在这种情况下，使用白色字体时，Firefox会显示一个空白页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字颜色。

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

Feature Detection我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。 通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可 就要采用备用的。 再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

var h1 = document.createElement(‘h1‘);
if ( !( ‘webkitTextStroke‘ in h1.style ) ) {
   var heading = document.getElementsByTagName(‘h1‘)[0];
   heading.style.color = ‘black‘;
}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色 设置成黑色。

5. Multiple Backgrounds

Background属性在CSS3样式中已经彻底改革，开始支持多背景图片。 举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。 要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的补偿要添加一张单独的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下Modernizr。

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

对，就是这么做，分别定义background-size的x，y参数。 最新版本的Chrome 和 Safari支持此属性，但我们还是要用旧的方法支持旧的浏览器。

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

7. text-overflow

浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持切断容器中的文本，而且也给出了一个省略号的特性。

Text-overflow

.box {

   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
   border: 1px solid black;
   width: 400px;
   padding: 20px;
   cursor: pointer;
}

或许你会考虑当鼠标经过时显示全部的文本内容。

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

有点奇怪，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的 normal属性。现在正常了。 知道吗？您还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。

8. Flexible Box Model

Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性，但一旦你这么做了，将终身受益。 做个演示，创建简单的两列布局。

<div id="container">
 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>
</div>

首先我们要设定一个容器，然后指定它的宽和高，即便是没有实质性的内容在里面。

#container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;}

接下来分别定义#main和aside的背景色

#main {

   background: yellow;
}   

aside {
   background: red;
} 

到目前为了还没有看出什么效果来。

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。 看看有什么效果产生，当我们设置了#main的宽度后。

#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。

aside {
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一 行。

Flexible Box Model

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且 提供必要的备注。

9. Resize

只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分，可用于重定义textarea的大小。

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

可能的值：

  1. both： 重定义水平和垂直方向
  2. horizontal： 水平调整大小限制
  3. vertical： 垂直调整大小限制

none： 不支持重定义

10、 Transition

也许CSS3最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。好像IE9还不支持此功能，但这并不代表你不能使用这个功能，关键是在于提高技能。 现在模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。

The HTML 

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

The CSS

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover {
    padding-left: 6px;
 }

transition 有三个参数：

  1. The property to transition. （Set this value to all if needed） 转换属性。（设置此值为所有如有需要）
  2. The duration 持续时间
  3. The easing type 缓动类型

为什么我们不将transition直接应用到hover上呢？是因为我们只是在mouseover时生效，当mouseout时元素将立即返回到 其最初的状态。 因为我们对效果做了调整，所有对旧的浏览器不会产生任何影响。 接下来是通过文章所学，我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。具体如何创建我就不翻译了。

时间： 2024-10-31 20:09:24

前端必须要掌握的几个CSS3的属性的相关文章

CSS3 Transform属性详解

今天我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.本文主要介绍的是这三个属性之中的第一个──变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩

让IE浏览器支持CSS3圆角属性的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言

如何使用 css3 transform 属性来变换背景图？

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3 常用属性（三）-- 用户界面、文字、两种盒模型

用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染--然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示. 用户界面使用的示例如下: .font{ width:300px; height:300px; border:1px solid #000; margin:0px auto; column-count:3; /* 定义数量

css学习笔记——CSS3 transition 属性

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3 transition 属性</title> <style> .box{ width:100px; height:100px; background:red; -web

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

CSS3动画属性animation的用法

转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和开发时间上提供了便利. animation基本语法是: animation:name keeping-time animate-function delay times iteration final; 第一个参数:name: 动画的名字,即

CSS3新属性：在网站中使用访客电脑里没有安装的字体

CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的!不过不是访客主动下载的,而是网站开发者帮访客下载安装的,具体怎么实现的,我们还要从字体文件的格式说起.字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG.  TrueType Windows和Mac系统最常用的字体格式,其最大