面试总结【css篇】- css3新增特性

1.css3中的关键帧

@keyframes规则通过在动画序列中定义关键帧（或waypoints)的样式来控制CSS动画序列中的中间步骤。这

比转换更能控制动画序列的中间步骤。

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}    

JavaScript 可以通过 CSS对象模型接口CSSKeyframesRule来访问 @keyframes 

要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name 这个属性来将一个动画同其关键帧声明匹配。每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

2.颜色的表示方法：rgba

3.transparent，控制透明度（这个可以实现三角形）

div {
　　width: 0;
　　/* border-top: red solid 5px;
　　border-left: transparent solid 5px;
　　border-bottom: transparent solid 5px;
　　border-right: transparent solid 5px; */
　　border: 16px solid red;
　　border-color: transparent red transparent transparent;}

4.边框的属性

(1) 边框圆角

border-radius: 左上角 右下角 右下角 左下角

(2) 边框阴影

box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset(内阴影）

(3) 边框图片

5.文本属性

1) 文本阴影

text-shadow: 2px(水平，可为负数） 3px（垂直，可为负数） 2px(模糊距离，不能为负数） red;

2) 文本描边

-webkit-text-stroke:宽度 颜色

3) 溢出省略

text-overflow:ellipse(省略号）；要和overflow: hidden;  white-space:nowrap使用。

6.css3渐变

转载于:https://www.cnblogs.com/still1/p/10856971.html