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

waterv 2019-10-31

边框:

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

相关推荐