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

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的更多相关文章
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1
通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景
CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- IT兄弟连 HTML5教程 CSS3属性特效 倒影
在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...
- IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...
- IT兄弟连 HTML5教程 多媒体应用 小结及习题
小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3
5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2
3 背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...
随机推荐
- 反射从入门到精通之深入了解Class类
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 小而美的GIF生成神器ScreenToGif
起因 在写计算机图形学博客时,需要讲解一个算法,课本上抽象的语言未免让人读着头大,还在老师给的PPT中有代码的演示,我就想将演示做出GIF动图帮助读者理解算法,其实之前浪迹博客园的时候就发现有许多博主 ...
- Winform DataGridView控件数据导出EXcel
/// <summary> /// 导出Excel /// </summary> /// <param name="dgv"></para ...
- Jupyter 快捷键总结
转载自https://www.cnblogs.com/hello-alan/p/11376325.htmlJupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本: ...
- 【活动】美团技术沙龙第49期:AI在外卖场景中的最佳实践
美团技术沙龙第49期开始啦! 本次沙龙,美团外卖技术部专家会深入介绍AI在对话系统.图像处理.个性化推荐.智能营销等方向在外卖业务中的实践,希望与业界技术同学一起交流学习. 无论你从事智能搜索,或是算 ...
- Yii2 框架跑脚本时内存泄漏问题分析
现象 在跑 edu_ocr_img 表的归档时,每跑几万个数据,都会报一次内存耗尽 PHP Fatal error: Allowed memory size of 134217728 bytesex ...
- 域控权限提升PTH攻击
0x01 漏洞利用条件 1.被pth攻击的计算机未打补丁(KB2871997)2.拿到一台域成员主机并且拿到管理员组的域用户的NTML 3.对方主机存在相同账号并且是管理员组成员 0x02 本地用户N ...
- 亚马逊写作文档tip
亚马逊的文档要求任何一份开会备忘录/要点备忘录都需要控制在4页左右,Jeff 自己也强调过,4页的备忘录比20页的备忘录要求的更高,它不仅需要更好的思考,也需要对开会讨论各个重点之间关系的理解.ppt ...
- 网络爬虫引发的问题及robots协议
一.网络爬虫的尺寸 1.以爬取网页,玩转网页为目的进行小规模,数据量小对爬取速度不敏感的可以使用request库实现功能(占90%) 2.以爬取网站或爬取系列网站为目的,比如说获取一个或多个旅游网站的 ...
- 理解MVVM在react、vue中的使用
理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view) :是应用程序中数据显示的部分. ...