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. chrome 浏览器的使用技巧

    前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...

  2. python之with语句结合上下文管理器

    所谓上下文管理器即在一个类中重写了__enter__方法和__exit__方法的类就可以成为上下文管理器类. 我们可以通过with语句结合上下文管理器简化一些操作. 使用with语句结合自定义上下文管 ...

  3. 计算机二级Python

    概述 计算机二级在近两年新加了python的选择,趁机考了一下,顺便记录一下学习的一些所获 第一章 程序设计语言概述 考纲考点: 这一部分主要是介绍计算机语言的公共常识,一些尝试我就按照自己的理解方式 ...

  4. Ubuntu修改时间

    Ubuntu修改时区和更新时间 先查看当前系统时间 date -R 结果时区是:+0000 我需要的是东八区,这儿显示不是,所以需要设置一个时区 运行 tzselect 在这里我们选择亚洲 Asia, ...

  5. Power Platform之Power Automate新增RPA功能

    ​ 什么是RPA RPA( Robotic Process Automation 机器人流程自动化软件),是一种新型的人工智能的虚拟流程自动化机器人.RPA的核心是通过自动化.智能化技术来“替代人”进 ...

  6. CCF-CSP题解 201712-3 Crontab

    做完一定要仔仔细细地看一遍题目再交,之后发现坑点只能追悔莫及.比如这次"英文缩写(不区分大小写)"\(OwQ\). 给定多个周期性执行的任务,每个任务调度执行有时间的要求.求给定时 ...

  7. java之构造器

    1.构造方法的作用:在new创建对象时为其赋值. 2.构造方法的分类: ①无参构造public 同类名(){},有参构造public 同类名(参数列表){语句}. ②构造方法没有方法名,没有返回值类型 ...

  8. 《Java基础知识》Java抽象类,接口的概念和使用

    1.抽象类 在自上而下的继承层次结构中,位于上层的类更具有通用性,甚至可能更加抽象.从某种角度看,祖先类更加通用,它只包含一些最基本的成员,人们只将它作为派生其他类的基类,而不会用来创建对象.甚至,你 ...

  9. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  10. CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...