前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS样式更改——字体设置Font&边框Border

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

作者头像
前端皮皮
发布2020-11-25 14:32:28
3K0
发布2020-11-25 14:32:28
举报

前言

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

1.字体设置Font
1).字体系列
代码语言:javascript
复制
<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
2).字体风格
代码语言:javascript
复制
<div style='font-style:normal'></div>
文本倾斜:
normal   文本正常显示
italic   文本斜体显示
oblique  文本倾斜显示
3).字体变形
代码语言:javascript
复制
<div style='font-variant:small-caps'></div>
normal       显示标准字体。
small-caps      显示小型大写字母的字体。
4).字体加粗
代码语言:javascript
复制
<div style='font-weight:normal'></div>
normal    标准的字符
bold      粗体字符
bolder    更粗的字符
lighter   更细的字符
也可以使用数字表示,范围为100~900
5).字体大小
代码语言:javascript
复制
<div style='font-size:60px'></div>
smaller 变小
larger  变大
length  固定值
而且还支持百分比
2.边框Border

首先说一下边框风格,它的风格比较多,常用的一般是实线为主:

代码语言:javascript
复制
<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).边框形状
代码语言:javascript
复制
<div style='border-radius:25px;'></div>
代码语言:javascript
复制
2).边框阴影
代码语言:javascript
复制
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义:
边框各个方向的大小和颜色
3).边框图片
代码语言:javascript
复制
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义:
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

参考文档:W3C官方文档(CSS篇)

二、总结

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IT共享之家 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.字体设置Font
  • 2.边框Border
  • 二、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档