一.颜色模式 HSLA
在我们熟悉的颜色设置中秒回经常使用red,pink等颜色名词,也会使用rgb #999;等16进制来设置我们的颜色
在一些特定的场景中,我们也会使用rgba来设置,每一位分别表示红绿蓝已经透明度,
如: reba(155,255,255,.5) 最后透明度为.5 半透明状态,取值范围是-0-1
下面我们介绍一种不一样的颜色模式(HSLA) --- 可以通过设置色调来改变颜色
H : 色调 0-360
S : 饱和度 0-100%
L : 亮度 0-100%
A : 透明度 0-1
二.私有前缀(解决css3兼容)
谷歌 苹果 : -webkit-
火狐 : -moz-
IE : -ms-
欧朋 : -o-
举例: 渐变设置
background: -webkit-linear-gradient(to right, red, yellow);
三.阴影
1.文本阴影 (4个参数)
text-shadow : 阴影水平位移 阴影垂直位移 模糊程度 阴影颜色;
一个文本可以设置多个阴影,每个阴影按照正常的格式书写,多个阴影之间用逗号隔开
2.盒子阴影(5个参数)
box-shadow : 阴影水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 内阴影(inset);
四.盒子模型(box-sizing)
box-sizing : content-box(默认) padding border-box
作用:用于指定盒子width和height属性是给盒子模型中的那一个盒子
box-sizing : border-box;自动內减,设置边框,padding不会撑大盒子
五.背景
1. background-size : 背景尺寸
1. background-size : 100px 100px;
2. background-size : 50% 50%; 相对于盒子本身的
3. background-size: cover ; 图片一定会完全覆盖盒子(可能会变形,相当于指定宽高)
4. background-size : contain ; 图片一定会完全显示(不会变形,相当于最大比例显示)
2. background-origin : 背景原点(了解)
用于指定背景图片是从盒子模型中的哪一个开始平铺
content-box
padding-box 默认值
border-box
3. background-clip : 背景裁剪(了解)
设定背景区域的大小,用于指定背景图片从盒子的哪里开始裁剪
padding-box
content-box
border-box 默认值
4.多背景
一个盒子可以设置多个背景;
每个背景按照正常语法格式书写,多个背景之间使用逗号隔开
先写背景层级高的,后写背景层级低的,要不然会被覆盖
改变书写先后顺序来改变层级,背景颜色要加给最后一个背景语法
六.渐变
由一种颜色变为其他颜色
渐变属于背景图片 , deg 角度
1.线性渐变 linear-gradient
指沿着某条直线朝一个方向产生的渐变效果
要求 : 有区间 有颜色变化
注意: 渐变实际上相当于一张图片,因为需要加给background-image才会生效
background-image : linear-gradient(方向,起始颜色 百分比 , 终止颜色 百分比)
1. 最简单的渐变 backgroun-images : linear-gradient(red , green)
2. 设置渐变的方向 backgroun-images : linear-gradient(to right , red , green)
3. 设置渐变的角度 backgroun-images : linear-gradient(45deg , red , green)
4. 设置渐变的范围 backgroun-images : linear-gradient( to right, red 20% , green 80%)
5. 设置渐变的颜色的范围 backgroun-images : linear-gradient( to right , red20% , green 20%)
2.径向渐变 radial-gradient
指从一个中心点开始沿着四周产生渐变的效果
background-image : radial-dradient(辐射半径 at 中心点位置,起始颜色 , 终止颜色 )
1. 最简单的渐变 backgroun-images : radial-gradient(red , green)
2. 指定圆的半径和圆心 backgroun-images : radial-gradient( 200px at center , red , green)
3. 指定椭圆 backgroun-images : radial-gradient(200px 80px at center , red , green)
4. 指定范围 backgroun-images : radial-gradient( 200px to center, red 50% , green 50%)
3. 圆角 border-radius
border-radius : 左上角半径 右上角半径 右下角半径 左下角半径;
半径可以设置两个值:x和y值 x/y,一个值就是圆的1/4边,两个就是椭圆的1/4边
