前端面试题HTML+CSS基础篇——css3新增特性

css3中新增的属性总结

一、边框属性

1. border-radius：圆角边框

   .box{ width:200px; height:200px; border-radius:10px; }

这样盒子就会出现一个10px像素的圆角效果（可以是像素，也可以是多少百分比）

1. border-image：图片边框

   .box{ width:200px; height:200px; border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 / -o-border-image:url(border.png) 30 30 round; / Opera */ }

border-image是一个简写属性，它是border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat的综合属性

• border-image-source：用在边框的图片的路径。

• border-image-slice：图片边框向内偏移。

• border-image-width：图片边框的宽度。

• border-image-outset：边框图像区域超出边框的量。

• border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

• box-shadow：盒子阴影效果

  .box{ width:200px; height:200px; box-shadow: 10px 10px 5px #888888; }

二、背景属性

1. background-size：背景的尺寸

   .box{ width:200px; height:200px; background-image:url("1.png"); background-size:200px 200px; }

指定背景图片的大小为200px、200px，也可以是百分比，百分之百代表占满整着盒子

1. background-origin：背景图片的定位区域

   background-origin:content-box / padding-box / content-box; 1

三、文字属性

1. text-shadow：文本阴影效果

   p{ text-shadow: 5px 5px 5px #FF0000; }

2. word-wrap：单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行

   p{ word-wrap：break-word; //换行 word-wrap：normal; //不换行，正常处理 }

四、动画效果

1. transform

   .box{ transform:translate(平移) / rotate(旋转) / scale(缩放) / skew(扭曲); }

• animation

animation的使用

• transition过渡效果

transition经常和transform一起配合使用，写出一些炫酷的动画效果

五、css3多列布局

• colum-count：属性规定元素被分配列数
• colum-gap：列之间间隔
• colum-rule：列之间宽度样式和颜色规则，所有 column-rule-* 属性的简写