一、边框做三角形
div1是空元素
#div1{
width:0px;
height:0px;
border:25px solid transparent;
border-top-color:#f00;
}
二、盒模型
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%渐变
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%
background-image:radial-gradient(200px at top left,red 0%,green 50%,blue 100%);
3.渐变的浏览器兼容
forefox:-moz-
chrome、safari:-webkit-
opera:-o-