9  透明属性

元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果。现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行。通常我们定义颜色都是用十六进制表示。例如,background:#000000,表示背景色为黑色。当然也可以用RGB三原色值表示,例如,background:rgb(0,0,0),也表示背景色为黑色。RGBA只是在RGB的基础上增加了一个A,这个A表示透明度。而且这个属性不会被子元素继承下去,可以在定义颜色的属性时使用。应用代码如下:

除了IE,其他浏览器几乎都支持rgba函数。该函数有4个参数,前3个参数为一种颜色的RGB值,第4个参数为透明度。

10  旋转属性

在CSS3中,可以使用transform属性对元素进行旋转、放缩、倾斜、平移。以旋转为例,代码如下所示:

除了早期版本的IE,其他浏览器都可以使用rotate函数来实现某个对象的旋转。比如rotate(7.5deg)表示顺时针旋转7.5°(degree)。利用CSS3,还可以完成skew(扭曲)和scale(缩放),以及css transitions(动态变换)等操作。

11  服务器端字体属性

设计网页的时候,可能会用到某种特殊的字体。如果用户的机器中没有安装这种字体,那么文字只能以普通字体显示。CSS3可以让用户的浏览器自行下载服务器端字体,这样就能呈现出设计者想要的效果。应用示例代码如下所示:

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

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

    通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

    CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 倒影

    在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式

    对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...

  6. IT兄弟连 HTML5教程 多媒体应用 小结及习题

    小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4

    7  多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

    5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

    3  背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...

随机推荐

  1. 在VS2017中连接到SQLite数据源(dbfist)

    在VS2017中配置.连接到SQLite数据源(dbfist) 需要安装的VS插件 SQLite/SQL Server Compact ToolBox 这个插件安装后,在选择数据源时已经可以选择SQL ...

  2. ES6,模块化

    遇到的问题: 在js文件中使用import,export的时候报错: 原因:因为NodeJS只支持部分ES6的语法,有些ES6语法还不支持,而import语法就是其中一个: 解决方法: 1.使用ES5 ...

  3. 16个Spring注解,你知道的有几个?

    @Controller 标识一个该类是Spring MVC controller处理器,用来创建处理http请求的对象.   @RestController Spring4之后加入的注解,原来在@Co ...

  4. 5分钟搞清楚Synchronized和Lock的概念与区别

    前言 并发编程中,锁是经常需要用到的,今天我们一起来看下Java中的锁机制:synchronized和lock. Synchronized 和 Lock的概念 Synchronized 是Java 并 ...

  5. jsonp跨域 封装通用方法

    jsonp跨域 封装通用方法 //用法如下 jsonp({ url:"https://www.xxxx.com", params:{wd:'b'}, callback:'show' ...

  6. MySql 5.7.28 安装注意事项

    刚好最近用到了5.7,所以顺便整理记录一下,5.7与5.6的区别是5.7不可以使用空密码直接登录 下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mys ...

  7. 我的chrome 智能扩展插件copier开源了!!!

    整理了下之前写的chrome-extensions-copier,分享给大家. 这个插件呢,主要用来在chrome浏览器上复制某些网站的某些特定内容,主要是用来复制代码,提高效率!(没办法,某些网站不 ...

  8. Fragment中不能使用自定义带参构造函数

    通过Fragment自定义的静态方法将值从activity传到fragment中,然后就想到这样不是多次一举吗,为什么不直接写个带参构造函数将值传过去呢?试了一下,发现Fragment有参构造函数竟然 ...

  9. Java面试题_第三阶段(Spring、MVC、IOC、AOP、DI、MyBatis、SSM、struts2)

    1.1 何为Spring Bean容器?Spring Bean容器与Spring IOC 容器有什么不同吗? 答:1)用于创建bean对象,管理bean对象的那个容器. 2)Spring IOC 容器 ...

  10. .Net Core HTTP Error 500.0 - ANCM In-Process Handler Load Failure 发布后启动错误处理

    方法1: 应用池高级配置 - 启动32位应用程序 - 设置为True 方法2: web.config <aspNetCore processPath="%LAUNCHER_PATH%& ...