web前端-css边框(border)

简介: web前端-css边框(border)

css边框属性


css的border属性允许您指定元素边框的样式、宽度和颜色。


css边框样式


border-style 属性指定要显示的边框类型。可以同时设置一到四个值(顺序为上边框、右边框、下边框和左边框)。


描述
dotted 定义点线边框
dashed 定义虚线边框
solid 定义实线边框
double 定义双边框
groove 定义 3D 坡口边框。效果取决于 border-color 值
ridge 定义 3D 脊线边框。效果取决于 border-color 值
inset 定义 3D inset 边框。效果取决于 border-color 值
outset 定义 3D outset 边框。效果取决于 border-color 值
none 定义无边框
hidden 定义隐藏边框


实例演示:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框设计</title>
    <style>
        p{
            margin-right: 1390px;
            text-align: center;
        }
        .p1{
            border-style: dotted;
            border-color: blueviolet;
        }
        .p2{
            border: 3px dashed blueviolet;
        }
        .p3{
            border: 5px solid blueviolet;
        }
        .p4{
            border: 10px double blueviolet;
        }
        .p5{
            border:10px groove black;
        }
        .p6{
            border: 10px ridge red;
        }
        .p7{
            border: 10px inset rgb(229, 34, 12);
        }
        .p8{
            border: 10px outset rgb(240, 66, 7);
        }
        .p9{
            border-style: none;
        }
        .p10{
            border-style: hidden;
        }
    </style>
</head>
<body>
    <p class="p1">点线边框</p>
    <p class="p2">虚线边框</p>
    <p class="p3">实线边框</p>
    <p class="p4">双边框</p>
    <p class="p5">3d坡口边框</p>
    <p class="p6">3d脊线边框</p>
    <p class="p7">3d inset边框</p>
    <p class="p8">3d outset边框</p>
    <p class="p9">无边框</p>
    <p class="p10">隐藏边框</p>
</body>
</html>


image.png


边框宽度


上面在border属性中设置了边框宽度,样式和颜色。若设置border-style属性则不能在内部设置边框宽度,而是需要在设置一个border-width属性。


拓展


设置border-width时,其设置值的顺序分别为上右下左,无论设置何值都是这个顺序。


例:


  1. 只有一个值时:border-width:20px 设置上下左右的边框宽度都为20px。


  1. 有俩值时:border-width:20px 30px设置上下宽度为20px,左右宽度为30px。


  1. 有三值时:border-width:20px 30px 35px设置上边宽度为20px,左右宽度为30px,下边宽度为35px。


  1. 有四个值时:border-width:20px 30px 35px 40px设置上右下左的宽度分别为20px,30px,35px,40px。


可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thinmediumthick


实例:


<style>
      .p11{
            border-style: double groove inset solid;
            border-width: 10px;       
        }
</style> 


<p class="p11">混合边框</p>


image.png


圆角边框


border-radius 属性用于向元素添加圆角边框


实例:


<style>
 .p13{
            border: 2px solid red;
            border-radius: 20px;
        }
</style>


<p class="p13">圆角边框</p>


效果:


image.png


css所有边框属性


属性 描述
border 简写属性,在一条声明中设置所有边框属性。
border-color 简写属性,设置四条边框的颜色。
border-radius 简写属性,可设置圆角的所有四个 border-*-radius 属性。
border-style 简写属性,设置四条边框的样式。
border-width 简写属性,设置四条边框的宽度。
border-bottom 简写属性,在一条声明中设置所有下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-left 简写属性,在一条声明中设置所有左边框属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-right 简写属性,在一条声明中设置所有右边框属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-top 简写属性,在一条声明中设置所有上边框属性。
border-top-color 设置上边框的颜色。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。
目录
相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
59 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
26天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
33 6
|
26天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
28 5
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
30 4
|
7月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
76 0
|
4月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
134 2
|
7月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
52 1