CSS3基础

CSS3 基础

CSS3简介

CSS 用于控制网页的样式和布局。而CSS3 是CSS 的升级版本，CSS3 语言开发是朝着模块化发展的。

CSS3 已经完全向后兼容，不必改变现有的设计。

border（边框）

可以创建角边框，添加阴影框，

• border-radius
• box-shadow
• border-image

圆角

border-redius:25px;

盒阴影

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

边界图片

<style> 
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

#round
{
    -webkit-border-image:url(/statics/images/course/border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(/statics/images/course/border.png) 30 30 round; /* Opera */
    border-image:url(/statics/images/course/border.png) 30 30 round;
}

#stretch
{
    -webkit-border-image:url(/statics/images/course/border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(/statics/images/course/border.png) 30 30 stretch; /* Opera */
    border-image:url(/statics/images/course/border.png) 30 30 stretch;
}
</style>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

border-radius（圆角）

例子：

<style> 
#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: url(/statics/images/course/paper.gif) repeat left top;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
    #rcorners9 {  /* 椭圆*/
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>

椭圆：

border-radius:50%

几个属性：

• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

background（背景）

CSS3更新了几个新的背景，提供了更大背景元素控制，通过这几个背景属性

多个背景重叠

example1 和 example2 : 两张图片前面的图片在前面

example3 ：剪裁 padding-box， 在padding（包括padding）里面的留下

example4：把content留下

<style>
#example1 {
    background-image: url(/statics/images/course/img_flwr.gif),     url(/statics/images/course/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
  }
  #example2 {
    background: url(/statics/images/course/img_flwr.gif) right bottom no-repeat, url(/statics/images/course/paper.gif) left top repeat;
    padding: 15px;
  }
    #example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;
}

    #example4 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}
    #example5{
        background-origin:content-box;
        background-origin:padding-box;
        background-origin:border-box;

    }
</style>

如图：

background-clip:

从指定位置（还是那三个位置）开始绘制

background-origin:

有三个区域(还是上面三个)可以放背景图像

gradients（渐变）

可以在两个或多个指定颜色之间显示平稳过渡，

---

两种类型的渐变（gradients）

• 线性渐变（Linear Gradients）向下/向上/向左/向右/对角线
• 径向渐变（Radial Gradients）由它们的中心定义

---

语法

线性渐变

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

使用角度

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

径向渐变（从中心向四周）

background: radial-gradient(center, shape size, start-color, ..., last-color);

---

例子：

1

<style>
#grad {  /* 从上到下的从红色到蓝色渐变*/
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, blue); /* 标准的语法 */ 
}
</style>

浏览器不同，写法可能不一样，下面都是标准的语法，其他浏览器相似的

2 从左到右（至少两个颜色）

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

3 对角

background: linear-gradient(to bottom right, red , blue);

4 角度

background: linear-gradient(270deg, red, blue);

5 多个颜色不均匀

background: linear-gradient(red 10%, green 85%, blue 90%);

transparency （透明度）

使用rgba() 函数定义颜色节点，最后一个参数可以是从0到1的值，0完全透明，1完全不透明

从透明到红色

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复的线性渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变（从中心到首周围）

background: radial-gradient(red 5%, green 15%, blue 60%);

径向渐变设置形状（eclipse， circle）

background: radial-gradient(circle, red, yellow, green);

径向渐变尺寸大小

• closest-side（最小）
• farthest-side
• closest-corner
• farthest-corner (最大)

background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black);
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);

径向渐变重复

background: repeating-radial-gradient(red, yellow 10%, green 15%);

text

• text-shadow
• box-shadow
• text-overflow
• work-wrap
• word-break

---

text-shadow

.shadow {text-shadow: 5px 5px 5px #f00; }

• 第一个像素值是文字阴影偏向右边的像素，
• 第二个像素值是文字阴影偏向下边的像素，
• 第三个像素是模糊程度（正比）。

box-shadow

div { box-shadow: 10px 10px 5px grey;}

使用::before ::after

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style>
  #boxshadow {
    position: relative;
    box-shadow: 6px 6px 0px rgba(255, 0, 0, 0.5);
    padding: 10px;
    background: white;
  }


  /* Make the image fit the box */
  #boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
  }


  #boxshadow::after {

    content: '';
    position: absolute;
    z-index: -1; 
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; 
    height: 100px;
    bottom: 0;
  }
</style>
</head>
<body>

  <div id="boxshadow">
    <img src="/statics/images/course/rock600x400.jpg" alt="Norway" width="600" height="400">
  </div>

</body>
</html>

阴影渐变色

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style>
  div.polaroid {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(255, 0, 0,1), 0 6px 20px 0 rgba(0, 255, 0, 1);
    text-align: center;
  }
  div.container{
    padding: 10px;

  }

</style>
</head>
<body>

  <h2> 卡片</h2>

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

  <div class="polaroid">
    <img src="/statics/images/course/rock600x400.jpg" alt="Norway" style="width:100%">
    <div class="container">
      <p>Hardanger, Norway</p>
    </div>
  </div>

</body>
</html>

text-overflow

只有overflow:hidden 时有用， 感觉用处不大

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style> 
  div.test
  {
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
  }
</style>
</head>
<body>

  <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
  <p>div 使用 "text-overflow:ellipsis":</p>
  <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
  <p>div 使用 "text-overflow:clip":</p>
  <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>

word-wrap

• break-word 允许长单词中换行
• keep-all 在hyphenates(连字符)换行
• break-all 在任何地方都可以换行

Font

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体，不能使用离线字体，通过CSS3， 可以使用自己喜欢的任意字体，自己的字体在CSS3 @font-face 规则中定义

---

在新的@font-face 规则中，必须首先定义字体的名称（比如myFirstFont），然后指向字体文件。

如果需要为HTML 元素使用字体，通过font-family属性来引用字体的名称（myFirstFont）

@font-face

---

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

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

div
{
    font-family:myFirstFont;
}
</style>

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

2D 转换

CSS3 转换，可以移动、比例化、反过来、旋转、拉伸元素

---

2D变换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()

---

transform:translate() （平移）

transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */

后面只给出标准形式

transform:rotate() （旋转）

transform:rotate(10deg); 顺时针（也可以逆时针，负数）

scale() （大小）

让元素宽或者高变为原来的几倍

transform:scale(2,1); 第一个参数是width 倍数， 第二个参数是height 倍数

skew() （倾斜）

根据X轴和Y轴，给出角度

transform:skew(40deg,10deg);

matrix() （功能都有）

有六个参数， 都没有单位

• width 倍数
• 正数：左上右下
• 正数：上左下右
• height 倍数
• 水平平移像素值
• 垂直平移像素值

3D 转换

属性	描述
transform	向元素应用2D或3D转换
transform-origin	允许改变被变换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	3D元素的透视效果
perspective-origin	3D元素的底部位置
backface-visibility	元素在不面对屏幕时是否可见

transform-origin

设置旋转元素的基点位置

transform-origin:50% 50%;

transform-style

值	描述
flat （default）	子元素将不保留其3D位置
preserve-3d	子元素保留其3D位置

transform-style: preserve-3d;

perspective

元素和视图的距离

值	描述
number	元素与视图的距离，以像素计
none	默认值。与0相同，不设置透视

perspective-origin

定义3D元素所基于X轴还是Y轴

值	描述
x-axis	定义该视图在x轴上的位置 可能的值： left center right length %
y-axis	定义该视图在y轴上的位置 可能的值: top center bottom length %

backface-visibility

当元素背面面向屏幕时候是否可见

值	描述
visible (default）	背面是可见的
hidden	背面是不可见的

3D转换方法

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x**,y,**z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值 。
scale3d(x**,y,**z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x**,y,z,**angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS3 过渡

添加某种效果可以从一种样式变换到另一种样式，不需要使用Flash动画或JavaScript。

• 指定要添加效果的CSS 属性
• 指定效果的持续时间

简单例子：

<style>
    div{
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover{
        width:300px;

    }
</style>

多项改变

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}
</style>

transition-property

指定哪些属性是可以过渡的，如下面一段代码指定width 和height 都是可以过渡的

transition-property:width,height;

transition-duration

定义过渡效果花费的时间

transition-duration: 5s;

transition-timing-function

规定过渡效果的时间曲线

值	描述
linear	以相同的速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
ease （默认值）	慢–>快–>慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	以慢速开始（cubic-bezier(0.42,0,1,1)）
ease-out	以慢速结束（cubic-bezier(0.42,0,0.58,1)）
ease-in-out	以慢速开始和结束（cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值，可能的值是 0 至 1 之间的数值

transition-delay

规定过渡效果何时开始，如下，两秒后开始过渡

transition-delay:2s;

transition

简写属性，在一个属性中设置四个过度属性

没有简写时候：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title>
  <style> 
  div
  {
    width:100px;
    height:100px;
    background:red;

    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:2s;

  }
  div:hover
  {
    width:200px;
  }
</style>
</head>
<body>

  <div></div>

</body>
</html>

将四行代码变为一行： transition:width 1s linear 2s;

transition语法

transition: property duration timing-function delay;

CSS3 动画

CSS3， 我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JavaScript

动画是元素从一种样式逐渐变化为另一种样式的效果

浏览器前缀

-webkit- ：chrome Opera Safari

-moz- : Firefox

---

在@keyframe 创建动画，把他绑定到一个选择器中（animation）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style> 
  div
  {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
  }

  @keyframes myfirst
  {
    from {background:red;}
    to {background:yellow;}
  }

  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
    from {background:red;}
    to {background:yellow;}
  }
</style>
</head>
<body>

  <div></div>

</body>
</html>

---

可以使用百分比控制变化发生的时间，关键词“from” 和“to”， 等同于0% 和100%

0% 是动画的开始， 100%是动画的完成。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style> 
  div
  {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
  }

  @keyframes myfirst
  {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
  }

</style>
</head>
<body>

  <div></div>
</body>
</html>

---

animation

所有动画属性的简写属性

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

在选择器中使用是一个animation animation-name:mymove;

animation-duration

动画完成一个周期所花费的秒或毫秒 animation-duration:2s;

默认值为0，表示不会有动画

animation-timing-function

动画的速度曲线，默认是“ease” 慢 –>块 –>慢 animation-timing-function:ease-out;

linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)

animation-delay

规定动画合适开始， 默认是0 animation-delay:2s;

animation-iteration-count

动画被播放的次数 animation-iteration-count:3;

n n次

infinite 无限次

animation-direction

动画时候在下一周期逆向播放， 默认是normal animation-direction:alternate;

值	描述
normal （默认值）	动画按正常播放
reverse	动画反向播放
alternate	动画在奇数次（1、3、5等）正向播放，在偶数次（2、4、6等）反向播放
alternate-reverse	动画在基数词（1、3、5等）反向播放，在偶数次（2、4、6等）正向播放
initial	设置该属性为它的默认值
inherit	从父元素继承该属性

animation-play-state

动画是否正在运行或暂停 默认是“running” animation-play-state:paused;

paused 暂停动画 （动画无效）

running 运行动画 （动画有效）

设置所有属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title>
  <style> 
  div
  {
    width:100px;
    height:100px;
    background:red;
    position:relative;

    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
  }

  @keyframes myfirst
  {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
  }

</style>
</head>
<body>

  <div></div>

</body>
</html>

一行顶六行

animation: myfirst 5s linear 2s infinite alternate;

多列

创建多个列对文本进行布局，可以收藏文章，需要用到的时候看一看

属性：

column-count

指定元素应分为的列数 column-count:3;

number	列的最佳数目将其中的元素的内容无法流出
auto	列数取决于其他属性

column-gap

列之间差距 column-gap:40px;

length	指定长度，将设置列之间的差距
normal	指定一个列之间普通差距 1em

column-rule

用于设置所有列规则的简写属性 column-rule: column-rule-width column-rule-style column-rule-color;

column-rule:3px outset #ff00ff;

column-rule-color

列之间颜色规则 column-rule-color:#ff0000;

column-rule-style

列之间的宽度规则 column-rule-style:dotted;

语法： column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

column-rule-width

列的宽度 column-rule-width:10px;

语法：column-rule-width: thin|medium|thick|length;

thin	细边框
medium	中等边框
thick	粗边框
length	指定边框宽度

column-width

指定列的宽度 column-width:100px;

语法 ：column-width: auto|length;

columns

属性设置列宽和列数 columns:100px 3;

语法：columns: column-width column-count;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>W3Cschool教程(w3cschool.cn)</title> 
  <style> 
  .newspaper
  {
    column-count:3;

    column-gap:40px;

    column-rule:4px outset #ff00ff;
  }
</style>
</head>
<body>


  <div class="newspaper">
    当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。
  </div>

</body>
</html>

用户界面

CSS3 中有一些新的用户界面特定来调整元素尺寸，框尺寸，外边框

resize

指定一个div元素，允许用户调整大小：

div
{
resize:both;
overflow:auto;
}

none （默认）	无法调整元素尺寸
both	可以调整高度和宽度
horizontal	可以调整元素的宽度
vertical	可以调整元素的高度

box-sizing

指定两个boxes接壤

content-box （默认）	指定元素的宽度和高度适用于box的宽度和高度。
border-box	对元素指定宽度和高度包括padding 和border 的指定
inherit	指定box-sizing 属性的值，应该从父元素继承

outline-offset

outline-offset属性设置轮廓框架在 border 边缘外的偏移

length	轮廓与边框边缘的距离
inherit	规定从父元素继承outline-offset属性的值

指定外边框边缘的轮廓15px

outline-offset 属性设置轮廓框架在border边缘外的偏移

outlines在有两方面不同于边框

• outlines 不占空间
• outlines 可能非矩形