课程链接:WEB前端系统学习 - 网易云课堂
参考教程:菜鸟教程
笔记链接:Web-Learn-Note
课时37 圆角 多背景 14:19
border-radius 圆角
分为水平半径和垂直半径 详情请见 img文件夹中radius.png图
水平半径和垂直半径中间用 / 分开
/左边代表水平半径
/右边代表垂直半径
多背景
在CSS3中,可以设置多背景,中间通过 , 隔开,不只可以设置基础样式,还可以设置背景尺寸,同样用 , 隔开
课时38 背景尺寸 19:41
背景大小
background-size 设置背景图像的大小
1.具体的数值
100px 200px 第一个值表示X轴的大小(宽度) 第二个值表示Y轴的大小(高度)如果只设置了一个值,表示X轴的背景大小(宽度),第二个值会自动缩放或者拉伸
2.百分比
80% 100% 第一个值表示X轴针对自己本身盒子的宽度的比例(宽度) 第二个值表示Y轴针对自己本身盒子高度的比例的大小(高度)如果只设置了一个值,表示X轴针对自己本身盒子的宽度的比例(宽度),第二个值会自动缩放或者拉伸
3.cover
把背景图尽量扩展至最大,使背景图覆盖整个盒子区域,至于X轴和Y轴是否超出,不予考虑
4.contain
把背景图尽量扩展至最大,使背景图尽量显示完整,当X轴或者Y轴其中之一贴近盒子边缘,另一方停下来,至于X轴和Y轴是否有填不满的情况,不予考虑
在CSS3中,所有的颜色值都可以用rgba的值来写,方法:border:50px solid rgba(255,255,255,0.9);
a表示透明度,数值在0~1之间,数值越大,越不透明
课时39 背景裁切 浏览器内核前缀 背景裁切 22:44
背景裁切:background-clip
1.border-box
从边框开始显示背景
2.padding-box
从padding区域开始显示背景
3.content-box
从内容区域显示背景
4.text 火狐不支持 ie9,10不支持
从文本区域显示背景
温馨提示:
需要rgba的配合 (需要rgba的透明度进行配合)
浏览器内核前缀
w3c组织
-webkit-transition: 1s; chrome safari ....
-moz-transition: 1s; 火狐
-ms-transition: 1s; ie 360
-o-transition: 1s; Opera
transition: 1s; w3c标准样式
课时40 线型渐变 20:24
课时41 线型渐变笔记 16:56
线型渐变 ie9以下不支持 渐变属于背景下的一个属性
方法 linear-gradient();
写法:
比如:background: linear-gradient(90deg,red,yellow,green,blue);
括号里的第一个值,是角度
第一个值可以模糊的值,也可以是具体的数值
模糊的值:
to right
to left
to top
to bottom
具体的角度数值
角度是指水平线和渐变线之间的角度,按逆时针方向计算
比如:
标准
0deg 从下到上
90deg 从左到右
非标准
0deg 从左到右
90deg 从下到上
标准和非标准的换算公式
90 - x = y
x为标准角度
y为非标准角度
(温馨提示:参考图:渐变角度参考图)
从第二个值开始是颜色值,可以通过具体的数值确定颜色值渐变的区域,比如
background: linear-gradient(90deg,
red 100px,
yellow 180px,
green 280px,
blue
);
(温馨提示:见图:颜色值区域参考图)
课时42 径向渐变 重复渐变 19:54
径向渐变 ie9以下不支持
渐变都是背景下一个属性
background: radial-gradient(at center,red,yellow,blue);
径向渐变是从圆心往进行渐变
括号里的第一个值,是圆心位置
可以使模糊的值,也可以是具体的数值
模糊的值
at left
at center
at right
at top
at bottom
具体的数值
at 100px 200px
100px为X轴的偏移量
200px为Y轴的偏移量
从第二个值开始,是颜色值 ,颜色值可以无限的写
颜色值,可以通过具体的数值来规定,渐变区域或者范围
具体的数值可以是
1,100px
2,百分比
重复渐变
background: repeating-linear-gradient(to right,red 10%,yellow 20%,blue 30%);
background: repeating-radial-gradient(at center,red 10%,yellow 20%,blue 30%);
课时43 盒阴影 文字阴影 18:36
盒阴影
box-shadow
第一个值:默认省略或者inset 可以省略,省略即为默认
处理盒子阴影在盒子的里面还是外面
默认省略 ,就是外面
inset 就是里面
第二个值 :
具体的数值 可以是正数,也可以是负数 为盒子阴影X轴的大小
第三个值 :
具体的数值 可以是正数,也可以是负数 为盒子阴影Y轴的大小
第四个值 :
具体的数值 可以是正数,不可以是负数 可以省略 省略之后 ,没有模糊面积 为盒子阴影模糊面积
第五个值 :具体的颜色值,英文单词 十六进制 rgb rgba
盒阴影值可以不断的添加,中间用逗号隔开
文字阴影
第一个值 :
具体的数值 可以是正数,也可以是负数 为文字阴影X轴的大小
第二个值 :
具体的数值 可以是正数,也可以是负数 为文字阴影Y轴的大小
第三个值 :
具体的数值 可以是正数,不可以是负数 可以省略 省略之后 ,没有模糊面积 为文字阴影模糊面积
第四个值 :具体的颜色值,英文单词 十六进制 rgb rgba
文字阴影值可以不断的添加,中间用逗号隔开
课时44 蒙版 倒影 19:48
蒙版
目前只有-webkit-内核的浏览器支持,其他不支持
需要PNG的透明度遮罩
和背景设置一样,可以设置多个png为蒙版
倒影只有-webkit-内核浏览器支持
-webkit-box-reflect: below;
第一个值
控制倒影出现的位置
上 above
下 below
左 left
右 right
第二个值
倒影和本体之间间隙
为具体的数值: 比如 10px
-webkit-box-reflect: below 10px;
第三个值
可以透明度的渐变,也可以一个png透明的图片链接
透明度的渐变
-webkit-box-reflect:below 10px linear-gradient(to top,
rgba(255,255,255,1) 10px,
rgba(255,255,255,0.3) 80px,
rgba(255,255,255,0) 200px,
rgba(255,255,255,0),
rgba(255,255,255,0)
);
png透明的图片链接
-webkit-box-reflect:left 10px url("img/7.png");
课时45 媒体查询 13:35
例子:
@media screen and (max-width: 460px){
div {
width:300px;
height:600px;
border:30px solid yellow;
background: #000;
}
}
当屏幕发生变化,根据设置的最大值宽度或者最小值宽度时,读取大括号中的代码 比如:以下
@media screen and (当屏幕发生变化,最大宽度到达某一个值的时候 比如:max-width:960px){
会执行以下代码
div {
width:300px;
height:600px;
border:30px solid yellow;
background: #000;
}
}
课时46 viewport 布局百分比 18:47
width :控制viewport的大小 ,可以制定一个数值或一个特殊的值
如:device-width就是设备的宽度 (单位为缩放100%的CSS像素)
initial-scale:
初始缩放,就是页面开始缩放的程度,是一个浮点数
例如:initial-scale=1.0 ,页面开始的时候,就是1:1的比例
maximum-scale=1.0 , minimum-scale=1.0
最大缩放和最小缩放,允许放大或缩小多少倍
user-scalable=no
是否允许用户调整页面
如果为YES 用户可以改变
如果为NO 用户不可以改变
如果为NO ,用户不能缩放,maximum-scale=1.0 , minimum-scale=1.0 会失效
响应式布局
百分比布局
布局百分比
width
padding-left
padding-right
margin-left
margin-right
left
right
需要牢记的公式
目标元素的宽度 / 父级元素的宽度 = 百分比宽度
温馨提示:
高度的增加或者减少需要配合媒体查询
高度:
height
padding-top
padding-bottom
margin-top
margin-bottom
top
bottom
@media screen and () {}
图片百分比
图片的宽度和高度比较弹性化
图片如果不设置宽度和高度,会原始显示,当设置了图片的宽度百分比时,宽度发生变化,高度也会等比缩放
温馨提示,图片有时候太大,会超出,最好设置一个上限值,max-width 或者 max-height
文字百分比
em 和 rem
em父级的文字大小的倍数 父级大小是多少,决定子级文字em的大小
rem 就是针对HTML文字字体大小
一般响应式布局都用rem 通过媒体查询改变html的文字大小,就可以整体改变所有的页面中的文字大小
课时47 图片文字百分比 设备宽度自定义 23:19
图片的宽度和高度比较弹性化
图片如果不设置宽度和高度,会原始显示,当设置了图片的宽度百分比时,宽度发生变化,高度也会等比缩放
温馨提示,图片有时候太大,会超出,最好设置一个上限值,max-width 或者 max-height
em 和 rem
em父级的文字大小的倍数 父级大小是多少,决定子级文字em的大小
rem 就是针对HTML文字字体大小