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. 第一回：Scrapy的试水

    前言:今天算是见到Scrapy的第二天,之前只是偶尔查了查,对于这个框架的各种解释,我-----都-----看------不------懂----,没办法,见面就是刚. 目的:如题,试水 目标:< ...

  2. python扫描proxy并获取可用代理ip

    今天咱写一个挺实用的工具,就是扫描并获取可用的proxy 首先呢,我先百度找了一个网站:http://www.xicidaili.com 作为例子 这个网站里公布了许多的国内外可用的代理的ip和端口 ...

  3. TCP/IP拥塞控制

    TCP/IP拥塞控制包括:慢启动和拥塞避免.其操作流程如下所述: 初始化.拥塞窗口cwnd = 1,慢启动门限ssthresh = 65535 如果没有发生拥塞 若 cwnd < ssthres ...

  4. NET中解决KafKa多线程发送多主题的问题

    一般在KafKa消费程序中消费可以设置多个主题,那在同一程序中需要向KafKa发送不同主题的消息,如异常需要发到异常主题,正常的发送到正常的主题,这时候就需要实例化多个主题,然后逐个发送. 在NET中 ...

  5. 腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面

    腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面. Gi ...

  6. 安装nginx+ngx_lua支持WAF防护功能

    安装nginx+ngx_lua支持WAF防护功能 nginx lua模块淘宝开发的nginx第三方模块,它能将lua语言嵌入到nginx配置中,从而使用lua就极大增强了nginx的能力.nginx以 ...

  7. akoj-1148-小光棍数

    小光棍数 Time Limit:1000MS  Memory Limit:65536K Total Submit:197 Accepted:94 Description 最近Topcoder的XD遇到 ...

  8. jsp的验证码实现

    package com.xunfang.demo; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; imp ...

  9. mysql获取当前时间，前一天，后一天

    负责的项目中,使用的是mysql数据库,页面上要显示当天所注册人数的数量,获取当前的年月日,我使用的是 CURDATE(), 错误的sql语句 eg:SELECT COUNT(*) FROM USER ...

  10. golang的闭包和普通函数调用区别

    先看一段程序 package main import ( "fmt") func main() {  a := []int{1, 2, 3}  for _, i := range ...