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. 常用eslint配置

    "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告(不影响退出代码) "error"或者2 //把规则作为一个 ...

  2. docker进阶之路-基础篇 | 二:portainer安装与基本使用

    转载请注明作者及出处: 作者:银河架构师 原文链接:https://www.cnblogs.com/luas/p/12061755.html ​简介 Portainer 是轻量级,跨平台,开源的管理D ...

  3. 微信团队分享:极致优化,iOS版微信编译速度3倍提升的实践总结

    1.引言 岁月真是个养猪场,这几年,人胖了,微信代码也翻了. 记得 14 年转岗来微信时,用自己笔记本编译微信工程才十来分钟.如今用公司配的 17 年款 27-inch iMac 编译要接近半小时:偶 ...

  4. CSRF与auth模块

    目录 一.模拟实现中间件的编程思想 (一)impotlib模块 (二)实现功能的配置使用 二.跨站请求伪造CSRF (一)由来 (二)form表单的CSRF (三)ajax中的CSRF (1)通过da ...

  5. 《Java练习题》习题集二

    编程合集: https://www.cnblogs.com/jssj/p/12002760.html Java总结:https://www.cnblogs.com/jssj/p/11146205.ht ...

  6. JVM CPU Profiler技术原理及源码深度解析

    研发人员在遇到线上报警或需要优化系统性能时,常常需要分析程序运行行为和性能瓶颈.Profiling技术是一种在应用运行时收集程序相关信息的动态分析手段,常用的JVM Profiler可以从多个方面对程 ...

  7. Supermap/Cesium 开发心得----获取三维视角的四至范围

    网上目前有两种获取当前Camera的四至范围的方法 方法一    这种方法是最通用的,即使在哥伦布视角(2.5D下依旧能准确获取值) function getCurrentExtent() { // ...

  8. git提交时忽略指定文件

    git提交时忽略指定文件 我们在项目开发过程中经常用到git来管理自己的项目,使用git版本控制进行多人协作开发具有许多优势,这里就不一一阐述了,有兴趣的同学可以自己去查找资料进行系统的学习.而本篇文 ...

  9. bbbbbb

    Blazor 机制初探以及什么是前后端分离,还不赶紧上车? 标签: Blazor .Net 上一篇文章我发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前 ...

  10. WebShell代码分析溯源(五)

    WebShell代码分析溯源(五) 一.一句话变形马样本 <?php $e=$_REQUEST['e'];$arr=array($_POST['POST'],);array_filter($ar ...