设置元素背景图片的原始起始位置。

语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

实现溢出div部分以省略号展示

div{

    text-overflow:ellipsis; //说明文字溢出时用什么方式显示

    overflow:hidden; //强制文本在一行内显示(不能换行)

    white-space:nowrap; //溢出内容为隐藏

}

//实现鼠标经过显示全部内容

div:hover{

    word-wrap:break-word;//换行代码（这行不写效果一样）

    white-space:normal;//解开不能换行的限制

}

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

 border-radius是向元素添加圆角边框。

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

1、x和y应该表示扭曲方向，以矩形为例，作两个对边的垂线，当skewX改变时，上下边作的垂线与y轴（竖直方向）角度0度，左右边作的垂线与x轴（横向方向）为改变角度.
2、改变skewX相当于横向拉矩形，改变skewY相当于纵向拉矩形.

这里的水平方向是围绕着水平横向扭曲或旋转，那就是上下扭曲，围绕着垂直的扭曲那就是左右互相扭曲或旋转。

这里的水平方向为箭头是横方向，竖直方向理解为箭头是竖方向

skew(x,y)，第一个参数是水平扭曲，正值是往右边扭曲，负值是往左边扭曲，第二个参数是垂直扭曲，正值是往下扭曲，负值是往上扭曲，原点默认为中心点。第二个参数不设置默认为0。垂直方向不扭曲。

transform:skew(x,y)是改变元素的形状，不会让它旋转，它是让元素以其中心位置，围绕X轴与Y轴倾斜一定的角度。它还有skewY()/skewX()是单独让X轴或者Y轴倾斜 单位是deg；

x为正逆时针，为负顺时针；y正好相反；
Skew()具有三种情况：
1、skew(x,y)第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

rotate：通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

-ms-transform:rotate(7deg); //-ms代表ie内核识别码

-moz-transform:rotate(7deg); //-moz代表火狐内核识别码

-webkit-transform:rotate(7deg); //代表谷歌【chrome】/苹果【safari】内核识别码

-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码

transform:rotate(7deg); //统一标识语句。这句话也写下去，符合w3c标准

span属于行内元素,一开始旋转不需要display:block,是因为旋转的是div这个块,而span被包含在div内,旋转时不受影响,后面旋转却是单独针对文本,所以需要将行内元素转变成块级元素

box-shadow是向盒子添加阴影。支持添加一个或者多个.

如果为元素设置外阴影

元素名{
  box-shadow:4px 2px 6px #333333;
}

如果为元素设置内阴影

元素名{
  box-shadow:4px 2px 6px #333333 inset;
}

1 ：border-radius是向元素添加圆角边框。

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

<div>root选择器的演示</div>

:root{background:orange}

html {background:orange;}

效果一样

:read-only只选择input元素里设置了readonly="readonly"的元素

而且:read-only选择器只适用于input type="text textarea password"

p:target {

  background: orange;

  color: #fff;

}

：：selection

使用时写上双冒号

seletion选择器

选中文本时 改变默认的蓝白