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. 进程-(process)、线程-(Thread)

    进程和线程之间的区别: 内存之间的区别: 进程之间不可以共享内存空间,每个进程都有各自独立的内存空间: 线程之间则是可以共享一个进程里的内存空间: 通信机制方面的区别 默认情况下,进程之间很难互通的, ...

  2. 索引与Order By

    Order By 将对结果进行排序,这里的排序最大的特点是资源密集型,尽管多数时候它同时也是CPU密集型的.数据库在进行排序时,必须缓冲临时结果,读取到所有输入,并在完整的排序操作后才能产生第一个输出 ...

  3. hikari连接池属性详解

    hikari连接池属性详解 一.主要配置 1.dataSourceClassName 这是DataSourceJDBC驱动程序提供的类的名称.请查阅您的特定JDBC驱动程序的文档以获取此类名称,或参阅 ...

  4. NodeJS4-9静态资源服务器实战_发到npm上

    登录->publish一下 ->上npm官网查看 -> 安装全局 //登录 npm login //推上去npm npm publish //全局安装 npm i -g 你的文件名

  5. NodeJS4-5静态资源服务器实战_优化压缩文件

    浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encodin ...

  6. python基础知识第四篇(元组)

    元组 list列表 li[11,22,33,44]列表和元组的区别:元素不可被修改,不可被增加或者删除(一级元素),列表则相反 tuple元组 tu=(111,222,333,444) 支持索引取值 ...

  7. 物联网基础组件IoTClient开发系列

    系列目录 IoTClient开发1 - 你也可以写个聊天程序 IoTClient开发2 - 你也可以写个服务器 IoTClient开发3 - ModBusTcp协议客户端实现 IoTClient开发4 ...

  8. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. CRM、ERP是什么?

    CRM 全称 Customer Relationship Management,中文意思是客户关系管理. 为什么会有CRM? 因为我们进入到了产能过剩时代,从卖方市场过渡到买方市场,为了将产品卖出去, ...

  10. ShowDoc速记

    编写文档好工具showdoc部署 参考:https://www.showdoc.cc/ 一定要看,一定要用卷,丢失数据的痛苦,痛何如哉. https://www.cnblogs.com/harrych ...