css（2）

一、背景
背景图定位

background-position:x y;


取值&＃xff1a; 1.以px为单位的数字
2.百分比
3.关键字 先左右 后上下 x:/left/center/right y:/top/center/right
背景图片尺寸

background-size: 500px 500px;


取值 &＃xff1a;
1.以px为单位数字
2.以百分比为单位
3.cover 容器被图片100%覆盖&＃xff0c;哪怕图片显示不全&＃xff0c;也要把整个容器覆盖住
4.contain 容器把图片100%包含起来&＃xff0c;哪怕图片缩小的看不到&＃xff0c;也要把整张图片都包含住
背景图固定
将背景固定在网页中的某个位置&＃xff0c;一直处于可视化区域中&＃xff0c;不会随着滚动条滚动而发生变化&＃xff0c;但只显示在原容器中

background-attachment: fixed;


取值&＃xff1a;
scroll 默认值
fixed 固定

背景简写方式
在一个属性中&＃xff0c;指定多个属性值
background
取值
color url repeat attachment position

二、渐变gradient
1.什么是
多种颜色平缓变化的一种效果
2.颜色的主要因素
色标&＃xff1a;一种颜色&＃xff0c;以及这种出现的位置
一个渐变至少有两个色标
3.渐变的分类
&＃xff08;1&＃xff09;线性渐变
以直线的方式来填充渐变色
&＃xff08;2&＃xff09;径向渐变
以圆形的方式来填充渐变色
&＃xff08;3&＃xff09;重复渐变
将线性渐变和径向渐变 重复几次实现渐变
4.线性渐变
background-image:
取值&＃xff1a;
linear-gradient(angle,color-point1,color-point2,…);
angle&＃xff1a;渐变的方向和角度 1.关键字 to top/left/bottom/right 从上到下 从右到左 从上到下 从左到右
角度&＃xff1a;单位deg 0deg to top 90deg to right 180deg to bottom 270deg to left
color-point:色标
取值&＃xff1a; 颜色 0% 颜色 50px;
5.径向渐变
background-image:
取值&＃xff1a;radial-gradient(半径 at 圆心 ,color-point,color-point2,…);
半径&＃xff1a;size:以px为单位的数字
圆心position&＃xff1a;1 x y 以px为单位的数字 2 x% y% 3 关键字 x: left/center/right y: top/center/bottom
6.重复渐变
&＃xff08;1&＃xff09;重复线性渐变
background-image: repeating-linear-gradient(to bottom, #0f0 0%, #f00 25%);
&＃xff08;2&＃xff09;重复圆形渐变
background-image: repeating-radial-gradient(50px at center center, #d8bbe7 50%, #0b090a 100%);
7.浏览器兼容问题
所有的新版本都支持渐变属性
对于不支持的版本 可以通过添加前缀&＃xff0c;让浏览器支持
Chrome&＃xff1a;-webkit-
firefox -moz-
ie -ms-
o -o-
如果使用兼容性写法&＃xff0c;线性渐变中angle不能写方向&＃xff0c;写起始点&＃xff08;没有to&＃xff09;
三、文本格式化
1.字体加粗
font-weight 取值&＃xff1a; bold bolder lighter&＃xff08;细一些&＃xff09;;
2.小型大写字母
font-variant:
small-caps;
normal
3.字体属性的简写方式
font: style variant weight size family;
至少有size和family
4.行高
定义一行文字的高度
如果行高大于字体本身的大小&＃xff0c;该行的文本将在指定的行高内&＃xff0c;呈垂直居中效果显示
line-height:
取值&＃xff1a; 1.以px为单位的数字
2.无单位的数字&＃xff0c;字体大小的整倍数
多行文字使用行高的时候可能会出现不想要的结果
5.线条的修饰
text-decoration&＃xff1a;
取值&＃xff1a; overline&＃xff08;上划线&＃xff09;&＃xff0c;underline&＃xff08;下划线&＃xff09;&＃xff0c;line-throngh&＃xff08;删除线&＃xff09;&＃xff0c;none&＃xff08;无线条&＃xff09;
6.首行缩进
text-indent&＃xff1a;取值&＃xff1a;以px为单位的像素
7.文本阴影
text-shadow&＃xff1a;
取值
h-shadow 水平偏移量
v-shadow&＃xff1a; 纵轴偏移量
blur 模糊距离
color :颜色