link.css--连接外部样式表
1.文字样式：
①font-family：字体样式
②font-style：文本的字体样式
属性：normal-正常
italic-斜体字样式显示
oblique-文字向一边倾斜（与italic类似，但不太支持）
③font-variant--以小型大写字体或正常字体显示文本
属性：normal-正常
small-saps-浏览器以小型大写字体显示(不常用)
④font-weight--指定字体粗细
属性：normal-正常
bold--加粗
100-900（400-相当于normal；600稍大；700相当于blod）
bolder-加粗(推荐使用)
CSS新增：
⑤@font-face--自定义引入字体（需下载、ttf）
属性：src--必需；定义字体文件...
⑥font-family--（自定义名）
⑦font-stretch--拉伸字体（不常用）
⑧text-shadow--文本阴影 ：2px 2px 2px color;
(x-正半轴；y-负半轴；模糊度；颜色：可为三原色/16进制)
代码：
.p{
width: 500px;
height: 500px;
/* font-family: 华文新魏; */
font-family: 草书;
/* font-size: 30px; */
font-style: italic; /* 字体样式：倾斜 */
font-variant: small-caps; /* 以小型大写字体或正常字体显示文本 */
font-weight: bolder; /* 指定字体粗细 */
text-shadow: 2px 2px 2px yellowgreen; /* text-shadow--文本阴影 ：2px 2px 2px red;(x-正半轴；y-负半轴；模糊度，颜色) */
}
@font-face {
font-family: 草书;
src: url(../汉呈王世刚草书.ttf);
/* @font-face--自定义引入字体（需下载、ttf）
属性：src--必需；定义字体文件...
font-family--（自定义名） */
}
2.文本样式：
① text-transform：文本的大小写（针对英文）
属性：lowercase-小写
uppercase-大写
capitalize-首字母大写
② text-indent：文本缩进 (单位：px、em/1em为一个字体)
③ letter-spacing：文字间的间距
④ word-spacing：定义词间距（针对英文）
⑤ overflow：设置文本溢出效果
overflow:scroll--加滚动条(无论文本是否溢出)
⑥ word-warp：允许对长的不可分割的单词进行分割至下一行 woed-warp:break-word(可能产生留白)
⑦ word-break:break all(强制分割、不留白)
代码：
.s{
/* text-transform 适用于英文 */
text-transform: lowercase; /* 小写 */
text-transform: uppercase; /* 大写 */
text-transform: capitalize; /* 首字母大写 */
text-indent: 2em; /* 文本缩进 单位：em/px */
word-spacing: 2px; /* 定义词间距 仅限英文 */
word-wrap: break-word; /* 允许对长的不可分割的单词进行分割至下一行 woed-warp:break-word(可能产生留白) */
word-break:break all /* (强制分割) */
}
⑧ line-height 和 vertical-align-行间距
⑨ font-size = line-height ; 间距为0，是不被允许的；字体要小于行高
⑩ vertical-align属性：top-顶线、middle-中线 （必须为行内或行内块标签、inline/inline-block）
3.CSS背景：
①元素背景属性：
background 简写属性，作用是将背景属性设置在一个声明中
background-image：url---设置背景
background-position：设置图片起始位置（top、bottom、left、right组合使用）
background-repeat：设置图片是否重复（no-repeat：不重复）
② CSS新增
background-size：设置背景图大小
background-cover：扩展图片(不留白)
background-contain：背景扩展至最大（可能留白）
具体代码如下：https://www.cnblogs.com/warmNest-llb/p/17867898.html
4.CSS边框：
①元素边框属性：
border-style：边框样式
border-color：边框颜色
border-top/right/bottom/left；简写属性
border-top/right/bottom/left-color；上右下左边框颜色
border-top/right/bottom/left-style；用于设置元素样式
-
-
-
-
- none--定义无边框
- dotted--定义点状边框
- dashed--定义虚线
- solid--定义实线
- groove--定义凹槽样式
- ridge--定义3D垄状边框
- inset--3D inset边框
- outset--3D inset边框
-
-
-
border-top/right/bottom/left-weight；宽度
② 元素边框样式：
border-radius 属性简写
border-top/right/bottom/left(组合使用)-radius--px值越大越圆；
border-image 属性简写
border-image-style()
box-shadow(边框阴影)：(inset是内阴影，不加则是外阴影) px px px-阴影 color；（X正轴、Y正轴、阴影大小、颜色：单词/三原色/16进制）
③ css3新增边框属性- border-top-left-radius 左上角圆角边框。
- border-top-right-radius 右上角圆角边框。
- border-bottom-right-radius 右下角圆角边框。
- border-bottom-left-radius 左下角圆角边框。
代码：
.box{
width: 300px;
height: 300px;
/* 边框设置颜色 */
border-color: black;
/* 边框设置为无边框 */
border-style: none;
/* 边框设置 宽 */
border-width: 10px;
/* 边框设置为 虚线 */
border-style: dashed;
/* 边框设置为点状 */
border-style: dotted;
/* 边框设置为实线 */
border-style: solid;
/* 边框设置为凹槽样式 */
border-style: groove;
/* 边框设置为3D 垄状边框 */
border-style: ridge;
/* 边框设置为3D inset边框 */
border-style: inset;
/* 边框设置为3D outset边框 */
border-style: outset;
}
（大多用于变化图片样式）
- border-image-source--用在边框的图片的路径。
- border-image-slice--图片边框向内偏移。
- border-image-width--图片边框的宽度。
- border-image-outset--边框图像区域超出边框的量。
- 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸border- image- repeat(stretched)
**所有的样式之间都可以灵活运用，相互配合。
标签：style,进阶,样式,边框,--,字体,font,border From： https://www.cnblogs.com/warmNest-llb/p/17866954.html