css3（1）

边框:

盒子圆角：border-radius：5px / 20%；

border-radius:5px 4px 3px 2px; 左上，右上，右下，左下。

盒子阴影：

box-shadow：

box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度)  阴影扩展半径 阴影颜色  投影方式
注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的。

值有3个时，表示距离左侧、距离上侧、影子颜色；

值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色；

值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转；

负值时，在相反的方向。

背景：

引入： background-image

背景尺寸： 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：修剪文本

自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本。

文本换行属性：

word-break:

word-break:break-all：它的内容就会到200px自动换行，
     如果该行末端有个英文单词很长（congratulation等），
     它会把单词截断，变成该行末端为conra(congratulation的前端部分)，
     下一行为tulation（conguatulation）的后端部分了。

word-break:break-word：区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

颜色之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。

图片滤镜： filter

图片滤镜：模糊效果
.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
高亮效果
.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}
对比度
.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}
灰色图像
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
色相旋转
.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}
反转输入图像
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
透明度
.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}
饱和度
.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}
深褐色
.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}
阴影效果
.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}