CSS样式

样式

颜色表示方式

1.用颜色名表示 黄色yellow 红色red

2.#+用六位十六进制的数据表示颜色 #000000 - #ffffff (红两位蓝两位绿两位) 三原色混合原理

取值00-ff

3.rgb(red,green,blue) 取值0-255

4.rgba(red,green,blue,alpha)三原色取值0-255，alpha表示透明度0-1

5.opacity 透明度0-1 针对整个元素设置透明

6. 渐变 linear-gradient(0deg, red,blue 由红色渐变为蓝色

deg角度单位向上渐变的夹角

7.透明色 transparent

---

字体

1.color:设置字体颜色

2.font复合属性

font-size设置字体大小

font-weight设置字体粗细

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

3.text-decoration控制文字是否有修饰

none无修饰 underline下划线 line-through中划线 overline上划线

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

---

背景

background复合属性

background-color:设置背景颜色

background-image:设置背景图片 使用url()函数指定图片的地址

如果同时设置了背景颜色和背景图片，背景颜色被

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

background-position:设置背景图片位置 居中center left左边 right右边

background-attachment: fixed;设置背景图片不随浏览器滚动而滚动

---

边框

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

以左上角开始顺时针旋转

可以结合上下左右单独对某一个角使用border-up,border-,border

---

阴影

盒子阴影 box-shadow:水平位置，垂直位置，模糊度，阴影颜色，[inset]内阴影，不加括号就是外阴影

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

---

图片

border-radius 圆角图片

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

鼠标样式，cursor:pointer 鼠标变成小手 wait变成加载，help右下问号，move箭头