2017/7/24 学习心得 css3第二天

1、边框

1）边框圆角

单个圆角：水平半径，垂直半径

border-top-left-radius:60px 120px;//左上

border-bottom-left-radius:60px 120px;//左下

复合写法：水平半径/垂直半径

border-radius:60px 90px 90px 90px/px px px px;

border-radius:30px 40px 50px 60px;

赋值规律： 从左上开始，顺时针赋值，如果这个角没有值，去对角；

border-radius: 40px/60px;

四个角半径都相同是简写：

border-radius:60px;   或者50%

最好使用%

2）边框阴影

box-shadow:水平位移，垂直位移，模糊程度，阴影大小，阴影颜色 。

inset内阴影 外阴影不需要写

3）边框图片

border-img-source:url("");

图片边框的裁剪：border-image-slice:27 27 27 27;不需要单位

border-image-slice: 裁剪

border-image-width: 边框宽度

border-image-repeat: 边框图片的平铺

repeat:  图片显示不完整

round: 图片平铺 优化了，图片会完整显示

stretch: 拉伸

2、背景

1）尺寸

控制背景的大小：水平。垂直

background-size:100px 100px;

可以是数值或者百分比；

或者是cover覆盖（完全覆盖盒子，不保证完全显示）全屏背景自适应

 contain包含（保证背景图片最大化在图片中等比例显示，不保证铺满盒子。）

2）原点

background-origin:padding-box;  从内边距开始

background-origin:border-box;  从边框开始

background-origin:content-box;  从内容开始

3）背景裁剪

backgorund-clip:border-box;

从border-box开始裁剪，超出border-box的要裁剪。

4）多背景

按照背景语法格式书写，多个背景使用语法隔开

border-img-source:url("") no-repeat left top/right top/right bottom/left bottom/center;

3、渐变

1）线性渐变 gradient变化

background-image;linear-gradient(to right,yellow,green);方向，起始颜色，终止颜色

to right:从左到右

方向可以写角度：45deg，原点为左下角

多种颜色：

background-image;linear-gradient(to right,yellow 0%,red 30%,green 100%);

突变

background-image;linear-gradient(45deg,

yellow  0%,

yellow  25%,

red 25%,

red100%); //从0到25%是黄色，25到100是红色

2）径向渐变

background-image;radial-gradient(200px at left top,yellow,green);辐射范围 中心点位置，起始颜色，终止颜色

中心点可以表示为 at 50px 50px,at left right center bottom top,100px at center

background-image;radial-gradient(100px at center,

yellow  0%,

green  30%,

red 60%,

blue100%); //颜色从圆心开始扩张改变

球体：

background-image;radial-gradient(200px at 80px 80px,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.6) );

4、过渡 

过渡属性 持续时间 运动曲线  延迟时间

运动曲线：linear(匀速) ease-in (加速) ease减速 ease-out减速 ease-in-out先加速后减速

transition:width 2s.backgorund-color 2s; 

如果多个过渡的特性是一样，可以简写： transition：all 2s linear 1s；

5、2d变换

transform 

属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform 位移

rotate(angle)

定义 2D 旋转，在参数中规定角度。

1) 移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

x 在水平方向移动。向左是负

y 在垂直方向移动。向下是正

transform:translate(-100px,500px) rotate(7deg);

改变旋转中心：transform-origin:center bootm;下面中心点，也可以写像素，水平，垂直，默认是 图片几何中心