笔记：重新认识CSS3

1、CSS3边框

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

2、CSS3背景

• background-image
• background-size
• background-origin
• background-clip

不同的背景图像可用逗号隔开

<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>

background-origin: content-box/padding-box/ border-box

background-origin属性指定了背景图像的位置区域

background-clip: content-box/padding-box/ border-box

background-clip属性规定背景的绘制区域

3、CSS3渐变

• linear-gradient 线性渐变 某个方向
• radial-gradient 径向渐变 由中心定义

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, green); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, green); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, green); /* 标准的语法（必须放在最后
    /* background: linear-gradient(to right, red, green); 渐变方向向右 */
    /* background: linear-gradient(to bottom right, red, green); 渐变方向向右下角 */
    /* background: linear-gradient(35deg, red, green); 渐变方向 渐变线35deg */
    /* background: linear-gradient(to right, red, green, blue, orange); 使用多个颜色节点 */
    /* 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, green, blue); 径向渐变 */
    /* background: radial-gradient(circle, red, yellow, green); 设置形状的径向渐变 */
}
</style>

Internet Explorer 9 及之前的版本不支持渐变。

4、CSS3文字效果

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

文字效果 text sfdfsfsdfsfsf

<h5 style="text-shadow: 5px 5px 5px #FF0000;">文字效果 text sfdfsfsdfsfsf</h5>

text-overflow: ellipsis; 超出的文本 省略显示 ...

word-wrap:break-word; 允许长文本换行

word-break: keep-all/break-all 单词是否拆分换行

5、CSS3字体

可选择自己需要的字体

<style>
@font-face
{
    font-family: myfontname;
    src: url(font.woff);
}
div
{
    font-family:myfontname;
}
</style>

6、CSS3转换

对元素进行移动、缩放、转动、拉长或拉伸。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

transform属性

• translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
• rotate()方法，给定度数顺时针旋转元素。
• scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
• skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
• rotateX(120deg);
• rotateY(130deg);

7、CSS3过渡

元素从一种样式逐渐改变为另一种的效果。

div
{
	width:100px;
	height:100px;
	background:red;
	transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari or Chrome on MacOS*/
}
div:hover
{
	width:300px;
}

transition属性

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

8、CSS3动画

@keyframes 创建动画

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
@keyframes myframes
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-webkit-keyframes myframes /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

animation属性

• animation-name 规定 @keyframes 动画的名称
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
• animation-timing-function 规定动画的速度曲线。默认是 "ease:慢快慢"；"linear:等速"；"ease-in:低速开始"
• animation-fill-mode，默认none; forwards: 当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式。
• animation-delay 规定动画何时开始。默认是 0
• animation-iteration-count 规定动画被播放的次数。默认是 1; "infinite:无限次播放"
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

9、CSS3分列

• column-count 分割的列数
• column-gap 列间间隙
• column-rule-style 列间边框
• column-rule-width 列间边框宽度
• column-rule-color 列间边框颜色
• column-rule
• column-span 指定元素跨越多少列 默认1，/ all
• column-width 列宽

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
h2 {column-span: all;}

10、CSS3弹性布局

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

• flex-direction: row | row-reverse | column | column-reverse
  
  指定弹性子元素在父容器中的位置。

• justify-content: flex-start | flex-end | center | space-between | space-around 指定在水平轴的内容对齐方式

• align-items: flex-start | flex-end | center | baseline | stretch 子元素在纵轴方向上的对齐方式

• flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit 指定子元素换行方式

• align-content: flex-start | flex-end | center | space-between | space-around | stretch

• align-self: auto | flex-start | flex-end | center | baseline | stretch 子元素自身的对齐方式