CSS浮动

float：right

伪类：

a:link {color:#FF0000;}      /* 未访问链接*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */

a:active {color:#0000FF;}  /* 鼠标点击时 */

:first-child：匹配第一个元素

i:first-child：匹lang(no)配第一个x元素的i元素

:lang(no)

:first-letter

:first-line

:before

:after

opacity:0.6;不透明度

[title]----选择具有titile的元素

{

color:blue;

}

[title=runoob]----title等于特定值的元素

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

在本章中，您将了解以下的边框属性：

  • border-radius-----圆角
  • box-shadow----阴影
  • border-image----你可以使用图像创建一个边框border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

box-shadow: 10px 10px 5px #888;

CSS3 圆角

border-radius 属性，你可以给任何元素制作 "圆角"。

border-radius: 15px
50px 30px 5px;上右下左1

新的背景属性

顺序 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

CSS3 渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

background: linear-gradient(direction, color-stop1, color-stop2,
...);

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。
text-shadow:
5px
5px
5px
#FF0000;
box-shadow:
10px
10px
5px
grey;加模糊效果


<!DOCTYPE
html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<style>

div.card {

  width: 250px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  text-align: center;

}





div.header {

    background-color: #4CAF50;

    color: white;

    padding: 10px;

    font-size: 40px;

}





div.container {

    padding: 10px;

}

</style>

</head>

<body>


<!DOCTYPE
html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<style>

div.polaroid {

  width: 250px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  text-align: center;

}





div.container {

  padding: 10px;

}

</style>

</head>

<body>





<h2> 卡片</h2>





<p>box-shadow属性可以用来创建纸质样式卡片:</p>





<div class="polaroid">

  <img src="rock600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Hardanger, Norway</p>

  </div>

</div>





</body>

</html>

word-wrap:break-word;换行

CSS3 单词拆分换行

word-break:keep-all;

word-break:break-all;

CSS3字体

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf')

,url('Sansation_Light.eot'); /* IE9 */

}

@font-face{
font-family:
myFirstFont;
src:
url(sansation_bold.woff);
font-weight:bold;}

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义：

描述符 值 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

CSS3笔记之第三天的更多相关文章

  1. 【Unity Shaders】学习笔记——SurfaceShader（三）BasicDiffuse和HalfLambert

    [Unity Shaders]学习笔记——SurfaceShader(三)BasicDiffuse和HalfLambert 转载请注明出处:http://www.cnblogs.com/-867259 ...

  2. 【Git 使用笔记】第三部分：多分支开发

    ###举例仓库 仓库地址A:git@gitlab.54php.cn:guowei/demos.git 仓库地址B:git@gitlab.54php.cn:infra/demos.git 开发人员仓库C ...

  3. Deep Learning论文笔记之（三）单层非监督学习网络分析

    Deep Learning论文笔记之(三)单层非监督学习网络分析 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文,但老感 ...

  4. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章：变换

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章:变换 学习目标 理解如何用矩阵表示线性变换和仿射变换: 学习在 ...

  5. 《Java 8实战》读书笔记系列——第三部分：高效Java 8编程（四）：使用新的日期时间API

    https://www.lilu.org.cn/https://www.lilu.org.cn/ 第十二章:新的日期时间API 在Java 8之前,我们常用的日期时间API是java.util.Dat ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  7. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  9. CSS3 笔记三（Shadow/Text/Web Fonts）

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

随机推荐

  1. MySQL_第三方数据库引擎_tokudb

    前阵子迁移zabbix到tokudb,整理部分操作笔记到这篇博文.       如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各 ...

  2. 【bzoj2819】Nim

    Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游 ...

  3. mysql5.7.18的安装与主从复制

    CentOS6.7安装mysql5.7.18 1.  解压到/usr/local目录 # tar -zxvf mysql-5.7.18-linux-glibc2.5-i686.tar.gz -C /u ...

  4. pick定理详解

    一.概念 假设P的内部有I(P)个格点,边界上有B(P)个格点,则P的面积A(P)为:A(P)=I(P)+B(P)/2-1. 二.说明 Pick定理主要是计算格点多边形(定点全是格点的不自交图形)P的 ...

  5. Ubuntu超好用软件：剪贴板

    这个软件的作用就是保存你复制或者剪贴的内容 对于经常复制文字的Ubuntu使用者作用还是比较大的 下面附上安装代码 安装: sudo add-apt-repository ppa:shantzu/cl ...

  6. 是什么让javascript变得如此奇妙

    What Makes Javascript Weird...and AWESOME -> First Class Functions -> Event-Driven Evironment ...

  7. NYOJ--45--棋盘覆盖(大数)

    棋盘覆盖 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的 ...

  8. ASP.NET Core 源码学习之 Logging[4]:FileProvider

    前面几章介绍了 ASP.NET Core Logging 系统的配置和使用,而对于 Provider ,微软也提供了 Console, Debug, EventSource, TraceSource ...

  9. MacOS下安装gdb、mgo

    安装gdb:http://blog.panks.me/posts/2013/11/install-gdb-on-os-x-mavericks-from-source/ 注意最后两步: killall ...

  10. 线程池ThreadPoolExecutor与阻塞队列BlockingQueue应用

    1.线程池介绍 JDK5.0以上: java.util.concurrent.ThreadPoolExecutor  构造函数签名: public ThreadPoolExecutor( int co ...