小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

html+css常用属性

字体加粗

需加粗字体
需加粗字体

斜体

文字
文字

下划线

<ins>文字</ins>
文字

删除线

<del>文字</del>

上标

[数字]

下标

[数字]

背景

背景颜色属性

    div{
    Background-color:pink;
    }

不透明度设置用：rgba(r,g,b,alpha) ---->alpha介于0～1之间（0:完全透明，1:完全不透明）

使用：p{

background-color:rgba(255,0,0,0.5) (红色半透明)

}

背景图像属性

不透明度设置用:opacity

使用：

div{
    background-image:url(路径);
    }

⚠️背景颜色和背景图像可以同时设置，但是背景图像会覆盖背景颜色。

背景图像大小设置

当背景图像尺寸太小，填充不完整个页面，该图片会被默认重复出现来填充整个页面，此时使用：Background-repeat:no-repeat(也可选择仅水平重复，或仅垂直重复）。
background-size:cover(不破坏图像原比例的情况下，覆盖整个页面)。

背景图像位置

参数为方位词(center,left,right,top,bottom)

div{
    background-position:center top;
    }
    //第一个参数表示水平方向，第二个参数表示垂直方向

精确单位

    //background-position:x,y;    x，y就是背景图片的坐标，单位为像素px

div{
    background-position:20px 50px;
    }

背景附着

当页面内容过长，用户在滚动浏览时，背景图像不随页面内容滚动而滚动(可后期应用于视差滚动效果)

div{
    background-attachment:scroll;//随对象内容滚动
    background-attachment:fixed;//背景图像固定
    }

3.也可以把方位词和精确单位混合使用

Css3渐变属性

以下属性可创建类在div中实现

线性渐变：background-image:liner-gradient(渐变角度，颜色1，颜色2，...颜色n）【渐变角度以deg为单位】

使用：background-image:liner-gradient(90deg，pink，yellow)【颜色后可自行设置百分比】

径向渐变：background-image:radial-gradient(渐变形状，圆心位置，颜色1，颜色2，...颜色n）【渐变形状：circle，ellipse】

使用：background-image:radial-gradient((circle at center ,yellow 50%,white 75%))

重复的线性渐变图像：background-image: repeating-linear-gradient()

重复的径向渐变图像：background-image: repeating-radial-gradient()

设置圆角边框：border-radius:10px 20px 30px 40px【四个值依次对应左上角、右上角、右下角、左下角（顺时针顺序）】

Css之背景+渐变