[CSS]边框做三角形、background相关属性、雪碧spirit图、渐变gradient

一、边框做三角形

div1是空元素

1. #div1{
2. width:0px;
3. height:0px;
4. border:25px solid transparent;
5. border-top-color:#f00;
6. }

 

二、盒模型

1.margin：三个值，上，左右，下

 

三、背景

1.background-color:填充元素的内容、内边距、边框区域

 

2.background-img:url("images/1.png");

 

3.background-repeat:

取值：repeat、repeat-x、repeat-y、no-repeat

 

4.background-size:

取值：value1 value2：宽 高

            value1% value2%:百分比

              cover:覆盖，显示区域全覆盖，有可能图片显示不完整

             contain:包含，有一条边碰到就停止缩放。图片一定会完整显示，但可能不会覆盖所有显示区域

 

5.background-attachment(背景图固定)：

取值：scroll:默认，不固定

           fixed:固定

 

6.background-position(背景定位):

取值：x y ，x水平偏移位置（右为正），y垂直偏移位置（下为正），可负值

          x%  y%，相对于所在元素的宽高比例，多用于图像居中

         left right center top bottom

 

7.雪碧图制作:

a.测量icon尺寸，创建显示区域

b.背景图设置background-image

c.测量并设置偏移：icon往上往左

 

8.background-clip(背景剪裁)：背景从哪儿开始剪裁

取值：border-box:默认，剪裁到边框

           padding-box

           content-box

 

9.background-origin背景定位区域：背景从哪儿开始画

取值：border-box:默认

           padding-box

           content-box

四、渐变

属性：background-image处理

取值：linear-gradient：线性渐变

          radial-gradient：径向渐变

         repeating-linear-gradient：重复线性渐变

         repeating-radial-gradient：重复径向渐变

 

1.线性渐变：

background-image:linear-gradient(angle,color-point...)

angle:渐变方向或角度：to top、to bottom、to left、to right，0deg，90deg ...

color-point：表示颜色的起始点、过渡点、结束点

例：从上往下，实现红色0%，到绿色50%，到蓝色100%渐变

1. background-image:linear-gradient(to bottom,red 0%,green 50%,blue 100%);

 

2.径向渐变：

radial-gradient([size at position],color-point...)

size:圆的半径

position:圆心出现的位置，默认为元素的中心

例：圆心在左上方，红0%，绿50%，蓝100%

1. background-image:radial-gradient(200px at top left,red 0%,green 50%,blue 100%);

 

3.渐变的浏览器兼容

forefox:-moz-

chrome、safari：-webkit-

opera:-o-