css3初学 （属性 2D3D转换 过渡 渐变）

1、CSS3 圆角 border-radius

div { border:2px solid; border-radius:25px; }

2、CSS3 盒阴影 box-shadow

div { box-shadow: 10px 10px 5px #888888; }

3、CSS3 边界图片 border-image

div{border-image:url(border.png) 30 30 round;}

CSS3 背景

background-image图片

background-size大小

background-origin指定背景图像的位置区域

背景图片可以放置于content-box、padding-box或border-box区域。

background-clip背景剪裁属性 从指定位置开始绘制

背景图片可以从content-box、padding-box或border-box区域裁剪。

CSS3 2D转换
translate() 方法
div{transform:translate(50px,20px);}元素从当前位置向左侧移动50px，向下移动20px

rotate() 方法
div{transform:rotate(90deg);}元素顺时针旋转90度，若为负值为逆时针旋转

scacle() 方法
div{transform:scale(2,1/2);}把宽度转换为原始尺寸的2倍，把高度转换为原始高度的1/2倍

skew() 方法
div{transform:skew(30deg,20deg);}围绕x轴把元素翻转30度，围绕y轴翻转20度

origin()方法
div{transform:orign(right,bottom);}以右下角为轴心将元素旋转

3D转换

 

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

想让哪个盒子有过渡样式，就把transition属性加在那个盒子上

 

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变 - 从上到下（默认情况下）background: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变由它的中心定义。background: radial-gradient(center, shape size, start-color, ..., last-color);

CSS3 渐变支持透明度（transparent），可用于创建减弱变淡的效果。