前端 面试题 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:表示列与列之间的间隔。