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

css3中新增的属性总结

一、边框属性

1. border-radius：圆角边框

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

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

2. 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，也可以是百分比，百分之百代表占满整着盒子

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

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

三、文字属性

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

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

1. 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-* 属性的简写