CSS3复习

CSS3

CSS3圆角

使用 CSS3 border-radius 属性，可以给任何元素制作 “圆角”。

 border-radius: 25px;//可以使用百分比

CSS3背景

1.background-image属性添加背景图片。

2.background-size指定背景图像的大小

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

4.background-clip背景剪裁属性是从指定位置开始绘制

CSS3渐变

线性渐变

为了创建一个线性渐变，必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

#gr1{
    background-image: linear-gradient(red, blue);
}

默认渐变，起点是红色，慢慢过渡到蓝色

#gr2{
  background-image: linear-gradient(to right, red , yellow);
}

从左到右渐变

#gr3 {
  background-image: linear-gradient(to bottom right, red, yellow);
}

从左上角到右下角的线性渐变

径向渐变

#gr{
  background-image: radial-gradient(circle, red, yellow, green);
}

形状为圆形的径向渐变

CSS3文本属性

1.text-shadow属性适用于文本阴影。

2box-shadow 属性适用于盒子阴影

3.text-overflow文本溢出属性指定应向用户如何显示溢出内容

CSS3 2D转换

1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform: translate(50px,100px)

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

2.rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

transform: rotate(30deg);

rotate值（30deg）元素顺时针旋转30度。

3.skew()方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX();表示只在X轴(水平方向)倾斜。
• skewY();表示只在Y轴(垂直方向)倾斜。

4.matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

CSS3 3D转换

1.rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

2.rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

CSS3过渡

CSS3 过渡（transition）是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定两项内容：

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

例：

div
{
    width:200px
    transition: width 2s;
}
div:hover{
    width:300px;
}

当鼠标针悬浮于div元素上时，元素宽度在2s内逐渐从200px到300px

CSS3动画

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

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

注意这样是无语实现效果的，只是单纯的创建

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称

• 规定动画的时长

  例：

div
{
    animation: myfirst 5s;
}

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

CSS3多列

1.column-count 属性指定了需要分割的列数。

2.column-gap 属性指定了列与列间的间隙。

3.column-rule-style 属性指定了列与列间的边框样式

4.column-width 属性指定了列的宽度

CSS3用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

1.resize属性指定一个元素是否应该由用户去调整大小。

2.box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

3.outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。