背景颜色和背景图片

    1.背景颜色

 

">颜色可以使用任何色值(十六进制 rgb rgba 单词)

一般这个值都需要我们重新设置

    2.背景图片的插入

 

background-image：url(路径)；

注意背景图和 img 标签的图片插入是有区别的：

1.img 标签插入图片在默认情况下直接是图片本身的大小

2.background-image：url(路径)；的方式不能直接使用并显示图片，必须要给当前元素设置宽度和高度才能显示出来背景图

    3.背景图的重复(平铺)

 

图片被平铺到元素中会出现的两种情况：

1.图片小于元素范围，出现重复，哪个方向有空余空间，就向哪个方向重复

2.图片范围大于元素范围，显示不全

背景图片的重复/平铺方式：

background-repeat: repeat; /*默认值，x y都重复*/

background-repeat: repeat-x; /*水平重复*/

background-repeat: repeat-y; /*竖直重复*/

background-repeat: no-repeat; /*不重复，背景图仅显示一次*/

    4.背景图的定位

 

background-position：这个属性的组合有点多，写可取值：

X轴(水平方向) left center right；

Y轴(竖直方向) top center bottom；               

background-position: center center;  /* 水平竖直都居中，可以简写成一个 */

background-position: 0px 0px; /* 默认的原点在左上角*/

background-position: 150px 50px; /* 向右向下 */

background-position: -50px -50px; /* 可以是负值，反方向，向左向上 */

    5.精灵图

 

CSS Sprite 直译为CSS精灵图，网页图片处理的一种方式

UI 会把多个小图标整合到一张图中，再利用背景图定位，选取到需要的小图标位置展示出来

优点：减少了向服务器的请求次数，进行了CSS优化

思路：

确定要显示的范围，需要把图标的宽高设定好

插入需要的精灵图，最好加上背景图不重复

改变图片定位，注意原点在左上角，一般是通过像素数值

阿里图标库：https://iconfont.cn/

里面有很多的矢量图，还可以自定色尺寸，免费使用

第一次使用需要注册一下，手机号就可以注册，非常方便

    6.背景渐变

 

 背景图可以设置出渐变的效果，目的是为了美化页面，其中最多的就是线性渐变

1.颜色设定：(默认颜色从上向下排列)

background-image：linear-gradient(颜色1，颜色2，颜色3，....)

2.角度设定：(角度单位deg)

改变渐变角度 background-image：linear-gradient(角度，颜色1，颜色2，...)

3.渐变色范围设定：

background-image：linear-gradient(角度，颜色1 起始位置 结束位置，颜色2 起始位置 结束位置，...)

范围的设定需要写在每个颜色色值的后面，值可以使用长度单位或者%

新版浏览器的写法：

background-image：linear-gradient(90deg，blue 0 100px，#fff 100px 200px，red 200px 300px)；

浏览器未更新的旧版写法：

background-image：linear-gradient(90deg，blue 33%，#fff 33%，#fff  67%，red 67%)；

看浏览器 F12 有没有改变角度的小转盘，如果没有说明浏览器不是新的，暂时用旧版写法

 

 

    7.背景图的尺寸

 

background-size：没有设置任何尺寸时使用图片本身的大小，宽度和高度都是 auto 默认值

可以用 px 设置成具体的值，也可以使用百分比

background-size：100% 50%；宽度占满屏幕，高度占50%

background-size：100% 100%；宽度高度都占满整个屏幕，除非图片完美适配，否则图片会变形

background-size：100% auto；宽度占满屏幕，高度自动适配，高度有所牺牲

background-size：auto 100%；高度占满屏幕，宽度自动适配，宽度有所牺牲

至于是要牺牲宽度还是高度，具体问题具体分析，比如学子的沙发可以裁掉，有的背景图不能裁

background-size：cover；铺满整个容器，多余的部分会被裁掉

background-size：contain；至少有一张完整的图呈现出来，一定有多余的空间

 

元素的美化和修饰

    

    1.边框的圆角问题

    圆角分别代表元素四个角的弧度半径，取值可以是长度单位，也可以是百分比

 

border-radius：边框圆切角的半径

radius 半径 r，用圆来切角，可以把直角变为圆角

写法1：使用像素

border-radius：7px；

写法2：使用百分比

border-radius：17%；

只有一个值的时候，四个角的弧度是一样的

写法3：给不同的角设置不同的弧度(不常用)

border-top-left-radius：20px；单独给左上角设置

border-radius：10px 30px；左上右下 右上左下  对角线

border-radius：10px 20px 30px；左上 右上和左下 右下

border-radius：10px 20px 30px 40px；左上角开始顺时针转

特殊形状

圆形：需要元素的宽度、高度一致，border-radius：50%

椭圆形：不需要元素的宽高一致，border-radius：50%

胶囊形：border-radius：高度的一半

    2.盒子阴影

 

box-shadow 元素的阴影效果

值1：必须写，阴影的 X 轴偏移量，建议使用绝对单位 px 可以为负值，阴影为反方向

值2：必须写，阴影的 Y 轴偏移量，建议使用绝对单位 px 可以为负值，阴影为反方向

值3：羽化值，默认为 0 ，羽化值越大，程度越强，不允许有负值

值4：阴影的扩散半径，默认 0 可以省略不写，还可以为负值(用的最少)

值5：阴影颜色，使用色值

值6：内、外阴影，默认 outset 外阴影    内阴影 inset

   

 

　3.常用光标(cursor)样式

 

cursor：default；箭头(默认值)

cursor：pointer；小手，用这个

cursor：text；文本输入符(工字型)

cursor：crosshair；十字光标，光标变成了小十字准心，截图/取色

cursor：wait；光标等待或出现沙漏

后面这些不用记，了解一下

cursor: move; 移动，变成了一个拖拽图标

cursor: progress;处理中

cursor: help; 帮助，光标右下角出了一个小问号

cursor: copy;拷贝，光标上多了个小加号

cursor: hand; 手,HBuilder有提示，但是谷歌不支持，老IE支持