• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 浅析几个CSS3常用功能的写法

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3兼容性写法,css3兼容写法,css3新功能,css3功能,css3等相关知识,佚名 希望在学习及工作中可以帮助到您

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

一、圆角(Rounded Corner)


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

二、盒状阴影(Box Shadow)


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

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

三、线性渐变(Gradient)


先看Firefox。


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


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


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

四、透明(opacity)

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

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



先看第一行。


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


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


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

五、旋转(rotation)


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

您可能想查找下面的文章:

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

相关文章

  • 2017-06-02css3+jq创作含苞待放的荷花
  • 2017-06-02CSS3实现闪烁动画效果的方法
  • 2017-06-02css3 media 响应式布局的简单实例
  • 2017-06-02css3.0 图形构成实例练习二
  • 2017-06-02CSS的pointer-events属性详细介绍(作用和注意事项)
  • 2017-06-02CSS3实现时间轴效果
  • 2017-06-02详解Css3新特性应用之过渡与动画
  • 2017-06-02一款利用html5和css3实现的3D立方体旋转效果教程
  • 2017-06-02CSS3实现内凹圆角的实例代码
  • 2017-06-02IE下实现类似CSS3 text-shadow文字阴影的几种方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css3实现3D色子翻转特效
    • HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
    • 纯CSS3制作的鼠标悬停时边框旋转
    • CSS3中颜色线性渐变实战
    • 通过CSS3的object-fit来调整图片适配尺寸的技巧简介
    • 常用的四种CSS透明属性介绍
    • css实例教程 一款纯css3实现的超炫动画背画特效
    • CSS3 渐变(Gradients)之CSS3 径向渐变
    • CSS3中的注音对齐属性ruby-align用法指南
    • CSS3实现多背景展示效果通过CSS3定位多张背景

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有