文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css字体设置Font边框Border的基础用法是什么

2024-04-02 19:55

关注

这篇文章主要介绍“css字体设置Font边框Border的基础用法是什么”,在日常操作中,相信很多人在css字体设置Font边框Border的基础用法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css字体设置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的基础用法是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯