CSS样式更改——字体设置Font边框Border 上篇⽂章主要讲述了CSS样式更改中的背景Background，这篇⽂章我们来谈谈字体设置Font&边框Border的基础⽤法。
1.字体设置Font
1).字体系列
<div style='font-family: sans-serif normal'></div>
可⽤字体：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
2).字体风格
<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~900
免费的字体边框样式下载5).字体⼤⼩
<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爬⾍与数据挖掘专⽤⽹站：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。