上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈字体设置Font&边框Border的基础用法。
1.字体设置Font
1).字体系列
<div style='font-family: sans-serif normal'></div>
可用字体：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier2).字体风格
<div style='font-style:normal'></div>
文本倾斜:
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示3).字体变形
<div style='font-variant:small-caps'></div>
normal 显示标准字体。
small-caps 显示小型大写字母的字体。4).字体加粗
<div style='font-weight:normal'></div>
normal 标准的字符
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
也可以使用数字表示，范围为100~9005).字体大小
<div style='font-size:60px'></div>
smaller 变小
larger 变大
length 固定值
而且还支持百分比2.边框Border
首先说一下边框风格，它的风格比较多，常用的一般是实线为主：
<div style='border-style:none'></div>
hidden 隐藏边框
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D凹槽边框
ridge 3D垄状边框
inset 3D inset边框
outset 3D outset边框
边框也有四面，所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用：
border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式先定义边框的宽度 风格和颜色，然后定义边框的其它属性。
1).边框形状
<div style='border-radius:25px;'></div>2).边框阴影
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义：
边框各个方向的大小和颜色3).边框图片
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义：
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。总结
这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获？请转发分享给更多的人****
IT共享之家
想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/CSS%20style%20change%20%20font%20setting%20Font%20%20Border%20Border.html
支付宝扫一扫 
评论列表（196条）
测试