css3 边框

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

css3 背景

  • background-image

  • background-size
    指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
    CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
    你指定的大小是相对于父元素的宽度和高度的百分比的大小。

  • background-origin
    background-origin 属性指定了背景图像的位置区域。
    content-box, padding-box,和 border-box区域内可以放置背景图像。

1
2
3
4
5
6
7
div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}
哇哇

  • background-clip: border-box|padding-box|cotent-box

css渐变(gradients)

css3定义了两种类型：

  • 线性渐变（linear gradient)
1
2
3
4
5
6
7
8
9
10
11
12
从下到上，默认从上到下
background-image:linear-gradient(to top,red,orange);
角度方式
background-image: linear-gradient(-90deg, red, yellow);
对角线式
background-image:linear-gradient(to bottom right,red,yellow);
使用多个色标
background-image:linear-gradient(red,yellow,green);
使用不透明度
background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
repeating-linear-gradient() 函数用于重复线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
  • 径向渐变（radial gradient)
    语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
形状：circle或ellipse(椭圆)
background-image: radial-gradient(circle, red, yellow, green);

文本效果

  • text-align-last
  • test-justify
  • text-overflow
    clip|ellipsis|string
  • word-break
  • word-wrap
  • writing-mode

|属性 |描述 |
|– |– |
|text-align-last|指定如何对齐文本的最后一行。 |
|text-justify |指定对齐的文本应如何对齐和间隔。 |
|text-overflow |指定应如何向用户呈现未显示的溢出内容。 |
|word-break |指定非 CJK 脚本的换行规则。 |
|word-wrap |允许长单词被打断并换到下一行。 |
|writing-mode |指定文本行是水平放置还是垂直放置。 |

网络字体@font-face

在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。
提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

1
2
3
4
5
6
7
8
9
10
11
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

div
{
	font-family:myFirstFont;
}

过渡

在给定的时间内平滑地改变属性值。

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

如需创建过渡效果，必须明确两件事：

  • 要添加效果的 CSS 属性
  • 效果的持续时间
    注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

当指定的 CSS 属性（width）值发生变化时，将开始过渡效果。

鼠标放我上面