边框
盒子圆角 border-radius：5px / 20%；
border-radius:5px 4px 3px 2px; 左上，右上，右下，左下
盒子阴影 box-shadow：box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式
注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的
值有3个时，表示距离左侧、距离上侧、影子颜色 值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色
值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转
负值时，在相反的方向
背景
背景尺寸 background-size auto默认值，不改变图片的大小 长度值 200px 50px 代表宽高依次是200 50 百分比 同长度值 cover填充整个外层容器
背景平铺 background-repeat
背景位置 位置定位1（background-origin） 根据文本位置：content-box 根据边框位置：border-box 根据内边距位置:padding-box 使用这个属性，必须设置背景为no-repeat
位置定位2（background-position）top right bottom left background-position:距左多少 距右多少
多重背景 逗号分割：background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;
字体
文本阴影 text-shadow：三个值：分别代表距离左侧、距离上侧、阴影颜色 阴影会显示文字
text-shadow：四个值：分别代表距离左侧、距离上侧、模糊程度及阴影颜色
文本溢出属性 overflow: hidden; white-space:nowrap;让文本强制不换行 要先设置这两个属性
text-overflow clip：修剪文本。 ellipsis：显示省略符号来代表被修剪的文本 自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本
文本换行属性 word-break: word-break:break-all 它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，
下一行为tulation（conguatulation）的后端部分了。
word-break:break-word; 区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
引入服务器上的字体样式 @font-face{font-family:字体名称;src:字体文件在服务器上的路径}
颜色之RGBA与透明度opcity
R：红 G：绿 B：蓝 alpha:透明度的参数
RGB的取值范围是0~255/0~100% alpha的取值范围是0~1 不可为负值
opcity 取值范围0~1
渐变颜色
background-image: linear-gradient(to bottom,#fff,red);
参数说明：第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
第二和第三个参数：是指定开始与结束的颜色值 可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);
图片
图片圆角 border-radius: 50%;（设置椭圆形）
设置图片为响应式 max-width: 100%;height: auto;
图片阴影 box-shadow
图片滤镜 详情见下方代码中
旋转
2D transform: rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转
translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动 transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存
scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数 transform:scale(2,4)：宽度变为2倍，高度变为4倍
skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度 transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转
transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转
3D transform rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数
rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数
2D与3D的区别 2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来
3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
width: 100px;
height: 100px;
/* border: 1px solid; */
/* background-color: rgba(220,230,242,1);/*最后一位是透明度 */
/* opacity: 1;0到1设置透明度 */
background-image: linear-gradient(to bottom,#fff,red,blue);/* 背景渐变 */
transform: rotate(8deg);
transform:translate(30px,30px);
transform:skew(30deg,0deg);
}
img{
border-radius: 50%;/* （设置椭圆形） */
max-width: 100%;height: auto;
box-shadow:2px 2px #0000FF;
transform: rotate(8deg);
}
img:hover{
transform: rotate(8deg) translate(30px,30px) scale(1.1,1.1);;
/* transform:scale(2,4); */
/* 模糊效果 blur*/
/* filter: blur(4px); */
/* 高亮效果 */
/* filter: brightness(0.30); */
/* 对比度 */
/* filter: contrast(180%); */
/* 灰色图像 */
/* filter:grayscale(100%); */
/* 色相旋转 */
/* filter: hue-rotate(180deg); */
/* 反转输入图像 */
/* filter: invert(100%); */
/* 透明度 */
/* filter: opacity(50%); */
/* 饱和度 */
/* filter: saturate(7); */
/* 深褐色 */
/* filter: sepia(100%); */
/* 阴影效果 */
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<img src="../祝庆迎zuoye10.28/img/5.jpg" >
<div class="aa">
</div>
</body>
</html>
效果
