浅析几个CSS3常用功能的写法


Posted in HTML / CSS onJune 05, 2014

以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证。

一、圆角(Rounded Corner)

浅析几个CSS3常用功能的写法

复制代码
代码如下:

.box_round {

-moz-border-radius: 30px; /* FF1+ */

-webkit-border-radius: 30px; /* Saf3+, Chrome */

border-radius: 30px; /* Opera 10.5, IE 9 */
}

圆角的实现比较简单,只要设好一个半径值就可以了。遗憾的是,目前所有的IE都不支持CSS圆角,要等到IE 9才行。

二、盒状阴影(Box Shadow)

浅析几个CSS3常用功能的写法

复制代码
代码如下:

.box_shadow {

-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */

-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */

box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
}

-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。

IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。

三、线性渐变(Gradient)

浅析几个CSS3常用功能的写法

复制代码
代码如下:

.box_gradient {

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */
}

先看Firefox。

复制代码
代码如下:

-moz-linear-gradient(top, #444444, #999999);

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

复制代码
代码如下:

-webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999));

-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

复制代码
代码如下:

DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

四、透明(opacity)

正常情况下,上层的对象会覆盖下层的对象。

浅析几个CSS3常用功能的写法

但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。

浅析几个CSS3常用功能的写法

复制代码
代码如下:

.box_rgba {

background-color: #B4B490;

background:transparent;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */

zoom: 1;

background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
}

先看第一行。

复制代码
代码如下:

background-color: #B4B490;

这是设置对象的预备色,也就是不透明时的颜色。如果浏览器不支持透明,就将显示这个颜色。

复制代码
代码如下:

background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
zoom: 1;

这几行是专门为IE写的,其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色(startColorstr)和终点色(endColorstr)。在单色透明的情况下,这两个值是相同的。需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。

复制代码
代码如下:

background-color: rgba(180, 180, 144, 0.6);

除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的RGB值,第四个为透明度,这里设为0.6。

五、旋转(rotation)

浅析几个CSS3常用功能的写法

复制代码
代码如下:

.box_rotate {

-moz-transform: rotate(7.5deg); /* FF3.5+ */

-o-transform: rotate(7.5deg); /* Opera 10.5 */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}

除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。

IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数SizingMethod表示重绘方式,'auto expand'代表自动扩展到新的边界。

除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。

六、服务器端字体(font-face)

设计网页的时候,可能会用到某种特殊的字体。如果用户的机器中没有安装,文字只能以普通字体显示。

浅析几个CSS3常用功能的写法

这时可以让用户的浏览器自行下载服务器端字体,然后就能呈现出设计者想要的效果。

浅析几个CSS3常用功能的写法

复制代码
代码如下:

@font-face {

font-family: 'MyFont';

src: url('myfont.eot'); /* IE6+ */

src: local('myfont.ttf'),

url('myfont.woff') format('woff'), /* FF3.6 */

url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */
}

第一行代码:

复制代码
代码如下:

font-family: 'MyFont';

表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。

复制代码
代码如下:

src: url('myfont.eot');

这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。

复制代码
代码如下:

src: local('myfont.ttf'),

url('myfont.woff') format('woff'),

url('myfont.ttf') format('truetype');

local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。

然后,使用的时候这样写就可以了。

复制代码
代码如下:

h2{ font-family: "MyFont"; }

需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的"同源政策"。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。

七、其他

利用css3,还可以完成transform(变形),包括skew(扭曲)和scale(缩放),以及css transitions(动态变换)。这些内容待以后再补充。

HTML / CSS 相关文章推荐
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 #HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 #HTML / CSS
css3 自定义字体font-face使用介绍
May 14 #HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 #HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 #HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 #HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 #HTML / CSS
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python魔法方法功能与用法简介
2019/04/04 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
会计员岗位职责
2014/03/15 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
森林防火宣传标语
2014/06/27 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Python+Appium自动化测试的实战
2021/06/30 Python