• CSS3 边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。

    在本章中,您将学到以下边框属性:

    • border-radius     圆角边框
    • box-shadow       边框阴影
    • border-image     边框插入图片  
      border-image:url(border.png) 30 30 round;

      CSS3 背景

      CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。

      在本章,您将学到以下背景属性:

      • background-size    背景图大小
      • background-origin   规定背景图片的定位区域。(背景图片可以放置于 content-box、padding-box 或 border-box 区域。)
      • background-clip   规定背景色的定位区域。(同上)

      您也将学到如何使用多重背景图片。

    • CSS3 文本效果

      CSS3 包含多个新的文本特性。

      在本章中,您将学到如下文本属性:

      • text-shadow  文本阴影
      • word-wrap   允许对长的不可分割的单词进行分割并换行到下一行。
      • hanging-punctuation 规定标点字符是否位于线框之外。  
        punctuation-trim 规定是否对标点字符进行修剪。  
        text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。  
        text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。  
        text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。  
        text-outline 规定文本的轮廓。  
        text-overflow 规定当文本溢出包含元素时发生的事情。

        CSS3 字体 @font-face 规则

        在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

        通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

        当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

        您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

        实例

        <style>
        @font-face
        {
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
        } div
        {
        font-family:myFirstFont;
        }
        </style>

        CSS3 2D转换

        通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

      • 2D Transform 方法

      • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
        translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
        translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
        translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
        scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
        scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
        scaleY(n) 定义 2D 缩放转换,改变元素的高度。
        rotate(angle) 定义 2D 旋转,在参数中规定角度。
        skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
        skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
        skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

        3D 转换

        CSS3 允许您使用 3D 转换来对元素进行格式化。

        在本章中,您将学到其中的一些 3D 转换方法:

        • rotateX()
        • rotateY()

        CSS3 过渡

        通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

      • 属性 描述 CSS
        transition 简写属性,用于在一个属性中设置四个过渡属性。 3
        transition-property 规定应用过渡的 CSS 属性的名称。 3
        transition-duration 定义过渡效果花费的时间。默认是 0。 3
        transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
        transition-delay 规定过渡效果何时开始。默认是 0。 3

        

实例

在一个例子中使用所有过渡属性:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

css3 常用。的更多相关文章

  1. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  2. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  3. web 开发:CSS3 常用属性——速查手册!

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  4. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  5. CSS3常用功能的写法 转

    CSS3常用功能的写法 作者: 阮一峰   随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站 ...

  6. CSS3常用知识点

    CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...

  7. 编写自己的代码库(css3常用动画的实现)

    编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...

  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  9. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  10. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

随机推荐

  1. CentOS 使用中问题记录

    ⚠️使用yum提示Error: rpmdb open failed的解决方案 清除原rpmdb文件,这一步可能不用操作,直接进行第2步 # rm -f /var/lib/rpm/__db.* 重建rp ...

  2. Java的数组索引问题

    /* 数组操作的两个常见小问题: ArrayIndexOutOfBoundsException:数组索引越界异常 原因:你访问了不存在的索引. NullPointerException:空指针异常 原 ...

  3. 开发者福利!百问I.MX6ULL裸机文档发布

    终于等到你,百问科技近600页的100ask_imx6ull裸机文档发布,已经合并到“嵌入式Linux应用开发完全手册第2版_韦东山全系列视频文档全集.pdf(1222页)”,所有人免费下载学习. 本 ...

  4. 漫谈LiteOS-端云互通组件-MQTT开发指南(下)

    1.介绍 SDK简介 Agent Tiny是部署在具备广域网能力.对功耗/存储/计算资源有苛刻限制的终端设备上的轻量级互联互通中间件,您只需调用API接口,便可实现设备快速接入到物联网平台以及数据上报 ...

  5. MySQL数据库缓存操作

    安装: 启动的话: -d:以后台的方式进行: -l:选择监听指定的ip服务地址:-m:给他分配多大的内存:-p:端口号默认的端口为11211的服务端口: 另一个: 安装:telnet 这个可以用来测试 ...

  6. VRRP概念、工作原理

    VRRP是一种路由容错协议,也可以叫做备份路由协议,可以把一个虚拟路由器的责任动态分配到局域网上的 VRRP 路由器中的一台. 控制虚拟路由器 IP 地址的 VRRP 路由器称为主路由器, 它负责转发 ...

  7. 2019-2020-1 20199329《Linux内核原理与分析》第十二周作业

    <Linux内核原理与分析>第十二周作业 一.本周内容概述: 通过编程理解 Set-UID 的运行机制与安全问题 完成实验楼上的<SET-UID程序漏洞实验> 二.本周学习内容 ...

  8. 自动化之SaltStack

    一.SaltStack 简介 Salt,,一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, ...

  9. Golang Map实现(四) map 的赋值和扩容

    title: Golang Map 实现 (四) date: 2020-04-28 18:20:30 tags: golang map 操作,是map 实现中较复杂的逻辑.因为当赋值时,为了减少has ...

  10. Swoole 实战:MySQL 查询器的实现(协程连接池版)

    目录 需求分析 使用示例 模块设计 UML 类图 入口 事务 连接池 连接 查询器的组装 总结 需求分析 本篇我们将通过 Swoole 实现一个自带连接池的 MySQL 查询器: 支持通过链式调用构造 ...