前两天在看网易的面试题,有一道是考察对css3新特性的background-clip等。表示我还是乖乖的去查了手册。
趁着css4还没出来还是要抓紧把css3弄起来啊。。要不然真的要忘光了。
css3边框
- border-radius
前年去边锋面试应聘当实习生的时候,技术主管就问了我这个问题。对于那时候只自学了css2的我来说,圆角啥的简直是难到我了。。依稀记得慕课网上教育我,用圆角,找个图片加背景图吧。〒▽〒
border-radius:10px; //四个角统一半径。
border-radius:10px 20px; //左上角和右下角一样,右上角和左下角一样。
border-radius:10px 20px 30px;//左上角10px,右上角和左下角20px,右下角30px。
border-radius:10px 20px 30px 40px;//左上角10px,右上角20px,右下角30px,左下角40px。
讲道理圆角属性很实用。而且画圆一级棒。我已经脑补了一堆的动画。。(ง’̀-‘́)ง
border-radius:50%; //圆角半径为长款的百分之50.
box-shadow
阴影,扩展性很大,炒鸡好用,能满足设计稿的属性都是好属性~ヽ(•̀ω•́ )ゝbox-shadow:h-shadow v-shadow blur spread color inset; *h-shadow:水平阴影位置,允许负值 *v-shadow:垂直阴影位置,允许负值 blur:模糊的距离 spread:阴影的尺寸 color:阴影的颜色 inset:将外部阴影改为内部阴影
- border-image
使用图像创建一个边框(我应该是不太会用这个属性,作为了解吧~)
css3背景
background-image
添加背景图片(很常用,都在怀疑是不是新特性。。)
可以添加多个背景图像。background-image:url(地址) background-image:url(xxx),url(xxx);
background-size
指定背景图像的大小,可以使用像素或者百分比。background-size:80px 80px; || background-size:100% 100%;
background-origin
指定了背景图像的区域位置
content-box,padding-box,border-boxbackground-origin:content-box;
*background-clip
背景裁剪属性,从指定位置开始绘制
content-box,padding-box,border-box
参考上图。
css3渐变
css3渐变解决了以前只能用图片实现渐变的问题,提高了性能。ヽ(•̀ω•́ )ゝ
线性渐变
background:linear-gradient(direction,color-stop1,color-stop2,...) //direction默认为top,从上到下 background:repeating-linear-gradient(color-stop1,color-stop2...) //重复的线性渐变
径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color); //shape定义了形状,circle(圆形)或ellipse(椭圆形) background:repeating-radial-gradient(color-stop1,color-stop2...) //重复的径向渐变