前端 面试题 css

1，css3新特性有哪些？

（1）css3边框

border-radius：css3圆角边框。

box-shadow：边框阴影。box-shadow:10px 10px 5px #888888;

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

border-image:边框图片。border-image：url(border.png) 30 30 round;

（2）css3背景（默认情况下，背景颜色从padding开始排放）

1，  background-origin：属性规定background-position属性相对于什么位置来定位（即原点）。（对背景图才有用）

background-origin：content-box（从内容开始）/padding-box（从padding开始）/border-box（从边框开始）

2，  background-size：改变背景图片的大小

属性值有：auto（图片原来的值，默认值）/

number(200px)可能让图片变形/

percentage : value%  value%(根据盒子的宽高来定)

cover（图片没有盒子大时，设置cover可使图片完全覆盖盒子，但是图片不能完全显示，一般配合background-position：center；去使用）

contain（包含，可能出现空白区域）

3，background-clip 裁剪，设置背景显示在哪个区域

取值：border-box：显示content，padding，border区域

padding-box：显示在padding、content区域

content-box：显示在content区域。

（3）css3文字效果

1， 文本阴影text-shadow ： 2px（水平，可为负数） 3px（垂直，可为负数）  2px（模糊距离，不能为负数）  red；

2， 文本描边 -webkit-text-stroke：宽度 颜色；一定要加上-webkit-前缀

3， 溢出省略  text-overflow：ellipse（省略号）；要和overflow：hidden；white-space：nowrap使用。

4，文本排版  dirction

ltr(left to right 从左到右)

rtl（right  to left 从右到左），一定要配合 unicode-bidi: bidi-override; */

direction: rtl;

unicode-bidi: bidi-override;

（4）css3     2D转换

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

translate（）：元素从当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数；

transform：translate（50px，100px）；

把元素从左侧移动50像素，从顶端移动100像素。

rotate（）：元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转。

transform：rotate（30deg）

scale（）：元素尺寸会增加或减少。倍数

根据给定的宽度（x轴）和高度（y轴）

transform：scale（2,4）

把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。

skew（）：元素转动给定的角度，（水平线和垂直线）

根据给定的水平线（x轴）和垂直线（y轴）

transform：skew（30deg，20deg）

围绕x轴把元素转动30度，围绕y轴转动20度。

（5）css3     3D转换

rotateX（）：元素围绕其X轴以给定的度数进行旋转。

transform：rotateX（120deg）

rotateY（）：元素围绕其Y轴以给定的度数进行旋转。

transform：容他特Y（120deg）；

（6）颜色的表示方法：

十六进制   ： 000   fff     ff0000

英文单词

rgba（red（0-360），green（0-255），blue（0-255），alpha（0-1））

颜色的值越大，则越亮，透明的值越大，越不透明。

hsla（色调（0-360），饱和度（0%-100%），亮度（0%-100%），透明度（0-1））

background：rgba（255,0,0,0.4）；

background：hsla（200,0%，50%，0）；

opacity：0；

（7）盒子模型

box-sizing：表示你设置的宽高从什么位置去设置

1，border-box：对象的实际宽度就等于设置的width值，即使定义,有border和padding。

2，content-border：对象的实际宽度等于设置的width值和border，padding之和

（8）css3渐变

1，background：linear-gradient（direction，color1，color2，。。。。）

direction取值：to  left（从右向左） to right（从左到右） to top （从下往上）to bottom（从上往下，默认值） to left bottom （左下角）to left top（左上角） to right top（右上角） to right bottom（右下角）

角度：单位为deg

2，径向渐变（一点向四周渐变）

background：-webkit-radial-gradient（center，shape，size，startcolor，。。。。lastcolor）

center 渐变起点的位置，可以是百分比（注意要设两个值）

shape 渐变形状 ellipse表示椭圆（默认），circle表示圆形

size 渐变的大小，即到哪里为止。closest-side 最近边

farthest-side 最远边  closest-corner  最近角  farthest-corner最远角

（9）css3过渡

transition：

取值：transition-property：all，height，width

transition-duration：3s；（过渡时间）

transition-delay：1s；（定义transition效果开始的时候）

transition-timing-function：（指定transition效果的转速曲线）

取值：ease；开始快，后面越来越慢

ease-in：开始慢，后面越来越快

ease-out：减速运动；

ease-in-out：先加速后减速

总写：transition：property     duration        delay         timing-function

transition：all     3s    linear；

（10）在CSS3中唯一引入的伪元素是::selection.

使被选中的文本成为红色：

::selection    
                    {
                        color:#ff0000;
                     }

::-moz-selection         （Firefox 支持替代的 ::-moz-selection。）
                    {
                         color:#ff0000;
                     }

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

（11）媒体查询@media

（12） 多栏布局

                     考虑浏览器兼容性：
                             -webkit-column-width
                             -moz-column-width
                             -o-column-width
                              -ms-column-width

-webkit-column-count：3；

-webkit-column-rule：1px   solid   #000；

-webkit-column-gap：2em；

column-count：表示布局几列；

column-rule：表示列与列之间间隔条的样式；

column-gap：表示列与列之间的间隔。