CSS样式深入

1.常见CSS属性

1.1 边框样式

（1）同时给所有边框设置样式
border: 宽度 样式 颜色;

（2）对各个边框单独设置样式
顶部边框
border-top: 宽度 样式 颜色;
（3）左边边框
border-left: 宽度 样式 颜色;
（4）右边边框
border-right: 宽度 样式 颜色;
（5）底部边框
border-bottom: 宽度 样式 颜色;
（6）某个边框单独设置宽度、样式、颜色
宽度
border-top-width: 宽度;
颜色
border-top-color:颜色;
样式:
border-top-style:样式;

（7）圆角边框

border-radius:border-radius: 15px（左上角） 50px（右上角） 30px（右下角） 5px（左下角）

border-radius: 15px（左上角） 50px（右上角、左下角） 30px（右下角）

border-radius: 15px（左上角、右下角） 50px（右上角、左下角）

border-radius: 15px（四个角）

对四个角单独设置圆角边框

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

1.2 文字样式

（1）文字颜色
color: 颜色; （用RGB（例如rgb（255，0，0））、英文单词（red、blue等）、十六进制方式（例如#cccccc）表示颜色）
（2）文字大小 
font-size:大小; 
（3）字体类型
font-family:类型; 
（4）字体风格 
font-style:风格（斜体）; 
（5）字体粗细 
font-weight:粗细; （默认为normal，bold：粗，bolder：更粗，lighter：更细，也可用数字表示，从100-900，400相当于normal，700相当于bold）

1.3 文本样式

（1）水平方向文本对齐方式
text-align：left,center,right
（2）行高：一行文本的高度: 行高与容器高度一致时，容器中的内容会垂直居中
line-height
（3）字体间距,每个字符之间的间距
letter-spacing
（4）首行缩进
text-indent
（5）调整垂直方向对齐方式:调整一行内容中某个字的垂直位置
vertical-align
（6）文本修饰线
text-decoration：underline（下划线）,overline（文本上方线）,none（无修饰线，可用于去除超链接字体的下划线）,line-through（删除线）

（7）文本阴影，规定水平阴影、垂直阴影、模糊距离、以及阴影的颜色

text-shadow

设置容器阴影:x轴偏移 y轴偏移 模糊度 阴影颜色
box-shadow:20px 20px 20px gray;

（8）列表样式（点/数字）:用于列表标签 ul ol

list-style:none;/*可去除列表前原点或数字*/

1.4 背景样式

background: 颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度;

平铺方式：no-repeat(不平铺) repeat(全平铺) repeat-x(水平平铺) repeat-y(垂直平铺)

背景位置（水平位置、垂直位置），只针对图片不平铺的场景
（1）像素值 
（2）百分比 
（3）关键字（水平:left center right） (垂直:top center bottom)
background-color:背景颜色 
background-image:背景图片 
background-repeat:背景平铺方式 
background-position:背景图片位置 
background-size:背景图片大小 

设置多张背景图片
background属性后的内容用逗号分隔 

1.5 动画效果

（1）鼠标悬浮

选择器：hover{

        样式属性：值；

}

过渡效果：transition 过度是元素从一种样式逐渐转变为另一种效果。当元素中的某个属性变化的时候，以动画的形式呈现属性的变化过程。

选择器{

        transition：样式属性 时间； 

}

overflow: 属性规定当内容溢出元素框时发⽣的事情

                hidden（内容会被修剪，并且其余内容是不可见的）

                auto（如果内容被修剪，则浏览器会显示滚动条一边查看内容）