【原】CSS样式更改——字体设置Font&边框Border

前言

上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈字体设置Font&边框Border的基础用法。。

1.字体设置Font

1).字体系列

<div style='font-family: sans-serif normal'></div>可用字体：SerifSans-serifMonospaceCursiveFantasyTimesCourier

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)。

参考文档：W3C官方文档（CSS篇）

二、总结

这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，希望让大家对CSS样式更改有个简单的认识和了解。

看完本文有收获？请转发分享给更多的人

IT共享之家