CSS之边框样式

这篇具有很好参考价值的文章主要介绍了CSS之边框样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

让我为大家介绍一下边框样式吧!如果大家想更进一步了解边框的使用,可以阅读这一篇文章:CSS边框border

属性 描述
none 没有边框,即忽略所有边框的宽度(默认值)
solid 边框为单实线
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 0 20px;
            background-color: red;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        .box1 {
            /* 没有边框 */
            border: none;
        }
        .box2 {
            /* 实线 */
            border: 10px solid #000;
        }
        .box3 {
            /* 虚线 */
            border: 10px dashed #000;
        }
        .box4 {
            /* 点线 */
            border: 10px dotted #000;
        }
        .box5 {
            /* 双实线 */
            border: 10px double #000;
        }
    </style>
</head>
<body>
    <div class="box1">none</div>
    <div class="box2">solid</div>
    <div class="box3">dashed</div>
    <div class="box4">dotted</div>
    <div class="box5">double</div>
</body>
</html>

代码效果:
CSS之边框样式,css,前端

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!文章来源地址https://www.toymoban.com/news/detail-817397.html

到了这里,关于CSS之边框样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端-CSS 字体和文本样式

    字体大小 字体粗细 字体样式 字体系列 文本缩进 取值 数字 + px 数字 + em(推荐:1em=当前标签的 font-size 大小) 文本水平对齐方式 内容居中需要给父元素设置居中属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ENfm2r2-1688123416662)(https://note.youda

    2024年02月11日
    浏览(118)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(55)
  • 【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

    欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解如何设置常用样式属性,包括文本属性、字

    2024年02月11日
    浏览(68)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(59)
  • 前端必备精美CSS样式,不来瞅瞅吗?

    我特别喜欢收集前端好看的特效代码,前端好用的网站。今天给大家分享出来,如果觉得有帮助可以 点赞收藏支持一下 ,如果能 关注 一下就再好不过了ヾ(≧▽≦*)o,之后还会分享许多干货,话不多说,上动图(网站在文章末尾): 目录 🍓按钮系列 🍇多选框系列 🍈开关

    2024年02月12日
    浏览(54)
  • 前端使用css去除input框的默认样式

    2024年01月23日
    浏览(60)
  • CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透

    一、什么是scoped 在vue文件中的style标签上,有一个特殊的属性:scoped。 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识,给组件中的每个标签对应的d

    2024年04月10日
    浏览(50)
  • 前端开发如何更好的避免样式冲突?级联层(CSS@layer)

    作者:vivo 互联网前端团队 - Zhang Jiqi 本文主要讲述了CSS中的级联层(CSS@layer),讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突,提高代码可读性和可维护性。 我们参看Cascading and Inheritance Level 5(13 January 2022) 中6.4节所述: 级

    2024年02月06日
    浏览(45)
  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(59)
  • 如何在CSS中写变量?一文带你了解前端样式利器

    目录 引言 概念 语法 基本用法 使用场景 全局变量 局部变量 ​编辑 媒体查询变量 动态定义 继承变量 自变量 与其他方案的区别 使用方式上 作用域的区别 编译产物 功能及拓展 总结 写在最后 前端的变量写法大致可以分为三大类,分别是CSS-in-JS,CSS预处理器,和CSS原生变量

    2024年02月06日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包