关于样式的前端知识

颜色

颜色表示方式

1、用颜色名表示 黄色yellow, 红色 red

2、#+用六位十六进制的数据表示颜色 #000000~#ffffff 前两位红光，中间绿色，后面两位是蓝色

3.rgb(red,green,blue)三原色混合原理 取值范围0-255

4.rgba(red,green,blue,alpha)三原色混合原理 取值范围0-255 alpha 表示透明度 0~1 只针对背景颜色

5.opacity 透明度 针对于整个元素

6.background: linear-gradient(90deg,red,green,blue);渐变

7.透明色 transparent

字体表示方式

1.color：设置字体颜色

2.font 复合属性

font-size 字体大小

font-weight 字体的粗细

font-style 设置字体风格 normal 正常 italic 斜体

text-decoration 控制文字是否有修饰线，none五修饰，underline下划线,line-through中划线 overline 上划线

text-align 规定文本的水平对齐方式 center居中 left左边 right右边

line-height 设置字体行高

背景表示方式

background 符合属性

background-color 背景颜色

background-image 设置背景图片 使用url()函数指定图片的地址 如果同时设置了背景颜色和背景图片，背景颜色被覆盖

background-repeat 设置背景图片平铺 no-repeat不平铺 repeat-x只横向 repeat-y只纵向

background-size 控制背景图片大小 cover 把所在容器铺满

background-position center图片位置居中

background-attachement fixed 控制背景图片不随浏览器的滚动而滚动

列表相关

list-style:none 没有格式

边框

边框相关

border:3px solid red 边框大小，形状。还有颜色

border-radius：圆角边框 指定边跨圆角的半径，半径越大圆角的程度越大

以左上角开始顺时针旋转

可以结合上下左右单纯对某一个角使用 border-top-left-right-radius 50px;

阴影

盒子的阴影：box-shadow :水平位置 垂直位置 模糊度 阴影颜色 [insert内阴影]

文字的阴影：text-shadow 水平位置 垂直位置 模糊度 阴影颜色

图片

object-fit:cover;控制图片不变形

鼠标样式

鼠标样式 cursor:pointer 小手