html透明图片字体变色,css3（边框，背景，字体，颜色之RGBA与透明度opcity，图片和渐变颜色）...

盒子圆角：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);

}

css3(边框，背景，字体，颜色之RGBA与透明度opcity，图片和渐变颜色)

标签：