当前位置：首页 > news >正文

深入理解border以及应用

news 2026/2/7 20:27:23

深入border属性以及应用👏👏

border这个属性在开发过程中很常用，常常用它来作为边界的。但是大家真的了解border吗？以及它的形状是什么样子的。

我们先来看这样一段代码：👏

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:07:48* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:08:01* @FilePath: \css面试题\13.drawTriangle\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box{width: 200px;height: 200px;border: 3px solid red;border-color: red green yellow seashell;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

它的效果图如下：

在这里插入图片描述

放大看，可以看到，每个border实际上是由一个高作为width的题型来构成的。整个盒子的宽度就为内部矩形宽度加上边框宽度(两个梯形的高度)。那么，如果==我们将中间矩形的宽度设为0==，又会发生什么呢？👏

在这里插入图片描述

效果如图所示:

那么利用这个特点，我们就可以利用border的特性来画出各个图形。👏

画三角形👏

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:07:48* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:31:54* @FilePath: \css面试题\13.drawTriangle\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>*{margin: 0;padding: 0;}.box{width: 0;height: 0;border-top: 200px solid rebeccapurple;border-left: 200px solid royalblue;border-right: 200px solid rosybrown;}.box1{width: 0;height: 0;border-top: 200px solid skyblue;border-right: 200px solid transparent;}</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>
</html>

效果图如下：
在这里插入图片描述

这里有一点，如果border只有两个边的话—左右哪里有空钻哪里(哪边没有写border钻到哪里)，则会形成对三角形！！！

画扇形👏

先看如下代码：

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:41:15* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:43:54* @FilePath: \css面试题\14.drawSector\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box1{width: 100px;height: 100px;border-radius: 10px;background-color: pink;border: 10px solid red;border-color: red seashell aqua palevioletred;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

在这里插入图片描述

border-radius似乎就是把原本梯形的那部分换算成了扇形。依据这个原理，我们就可以做出扇形了。

第一步：从矩形变成圆形

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:41:15* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:48:12* @FilePath: \css面试题\14.drawSector\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box1{width: 0;height: 0;border-radius: 10px;background-color: pink;border: 10px solid red;border-color: red seashell aqua palevioletred;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

在这里插入图片描述

第二步：扇形–隐藏边框

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:41:15* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:51:10* @FilePath: \css面试题\14.drawSector\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box1{width: 0;height: 0;border-radius: 10px;border: 10px solid red;border-color: red transparent transparent transparent;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

在这里插入图片描述

画半圆👏

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:41:15* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:51:10* @FilePath: \css面试题\14.drawSector\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box2{width: 100px;height: 100px;background-color: seagreen;border-radius: 50%;}</style>
</head>
<body><div class="box2"></div>
</body>
</html>

在这里插入图片描述

<!--* @Author: syk 185901261@qq.com* @Date: 2023-02-28 21:41:15* @LastEditors: syk 185901261@qq.com* @LastEditTime: 2023-02-28 21:57:29* @FilePath: \css面试题\14.drawSector\1.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>Document</title><style>.box3{background-color: red;width: 100px;height: 50px;border-radius: 0px 0px 100px 100px;}</style>
</head>
<body><div class="box3"></div>
</body>
</html>

在这里插入图片描述

到次为止，如果都对这些例子搞懂了，相信你对border属性也有一个更深的理解了。👏👏👏👏

深入理解border以及应用

深入border属性以及应用👏👏 border这个属性在开发过程中很常用，常常用它来作为边界的。但是大家真的了解border吗？以及它的形状是什么样子的。我们先来看这样一段代码：👏 <!--* Author: syk 185901…...

编程日记 2023/3/16 15:32:42

如何复现论文？什么是论文复现？

参考资料： 学习篇—顶会Paper复现方法 - 知乎如何读论文？复现代码？_复现代码是什么意思 - CSDN 我是如何复现我人生的第一篇论文的 - 知乎在我看来，论文复现应该有一个大前提和分为两个层次。大前提是你要清楚地懂得自己要…...

编程日记 2023/3/17 20:32:49

22.2.28打卡 Codeforces Round #851 (Div. 2) A~C

A题 One and Two 题面翻译题目描述给你一个数列 a1,a2,…,ana_1, a_2, \ldots, a_na1,a2,…,an . 数列中的每一个数的值要么是 111 要么是 222 . 找到一个最小的正整数 kkk，使之满足： 1≤k≤n−11 \leq k \leq n-11≤k≤n−1 , anda1⋅a2⋅……...

编程日记 2023/4/2 2:10:53

Learining C++ No.12【vector】

引言： 北京时间：2023/2/27/11:42，高数考试还在进行中，我充分意识到了学校的不高级，因为题目真的没什么意思，虽然挺平易近人，但是……，考试期间时间比较放松，所以不能耽误…...

编程日记 2023/3/31 22:52:51

【数电基础】——逻辑代数运算

目录 1.概念 1.基本逻辑概念 2.基本逻辑电路（与或非） 逻辑与运算与门电路： 逻辑或运算或门电路： 逻辑非运算（逻辑反） 非门电路编辑 3.复合逻辑电路（运算） 与非逻辑…...

编程日记 2023/3/1 0:30:04

【Redis】什么是缓存与数据库双写不一致？怎么解决？

1. 热点缓存重建我们以热点缓存 key 重建来一步步引出什么是缓存与数据库双写不一致，及其解决办法。 1.1 什么是热点缓存重建在实际开发中，开发人员使用 “缓存过期时间” 的策略来实现加速数据读写和内存使用率，这种策略能满足大多数…...

编程日记 2023/3/31 22:54:26

互联网衰退期，测试工程师35岁之路怎么走...

国内的互联网行业发展较快，所以造成了技术研发类员工工作强度比较大，同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高，超过35岁的基层研发类员工，往往因为家庭原因、身体原因，比较难以跟得上工作…...

编程日记 2023/3/17 20:34:49

动态规划(以背包问题为例)

1) 要求达到的目标为装入的背包的总价值最大，并且重量不超出2) 要求装入的物品不能重复动态规划(Dynamic Programming)算法的核心思想是：将大问题划分为小问题进行解决，从而一步步获取最优解的处理算法。动态规划算法与分治算法类似&#xff…...

编程日记 2023/4/2 2:12:02

Java异常

异常的体系结构在java的Throwable下有Error和Exception两个子类 Error(错误):程序运行中出现了严重的问题,非代码性错误,无法处理,常见的有虚拟机运行错误和内存溢出等Exception(异常):是由于代码本身造成的问题,可以进行处理,异常一个可以分为运行时异常和编译时异常运行…...

编程日记 2023/3/18 17:18:32

别克GL8改装完工，一起来看看效果

①豪华商务头等舱别克GL8作为商务车，不管是家用还是商务接待，原车内饰都太掉档次了，所以车主要求全部换掉。>>织布座椅换成航空座椅主副驾：改装纳帕皮中排：改装水晶宝座豪华版航空座椅，带通风、加…...

编程日记 2023/3/1 0:24:27

mac 中 shell 一些知识

mac 设置环境变量首先得看你所使用的 shell shell 是一个命令行解释器，顾名思义就是机器外面的一层壳，用于人机交互，只要是人与电脑之间交互的接口，就可以称为 shell。表现为其作用是用户输入一条命令，shell 就立即解…...

编程日记 2023/4/2 14:30:00

CentOS 配置FTP（开启VSFTPD服务）

网上已经有很多关于VSFTPD的配置，但有两个通病，要么就是原理介绍太多，要么就是不完整，操作下来又要查询多篇文章才能用。我这里不讲原理，只记录操作，尽可能通过复制下面的操作可以实现FTP读写功能。方便自…...

编程日记 2023/3/31 22:57:21

Http的请求方法

Http的请求方法对应的数据传输能力把Http请求分为Url类请求和Body类请求 1.Url类请求包括但不限于GET、HEAD、OPTIONS、TRACE 等请求方法 2.Body类请求包括但不限于POST、PUSH、PATCH、DELETE 等请求方法。 3.原因：get请求没有请求体（好像也可以…...

编程日记 2023/4/1 16:13:07

Python字典-- 内附蓝桥题：统计数字

字典 ~~不定时更新🎃，上次更新：2023/02/28 🗡常用函数（方法） 1. dic.get(key) --> 判断字典 dic 是否有 key，有返回其对应的值，没有返回 None 举个栗子🌰 dic …...

编程日记 2023/3/31 22:58:05

文本处理工具

Grep工具的基本使用grep作用：grep是行过滤工具；用于根据关键字进行行过滤提示：通过alias命令设置grep别名，搜索参数时带颜色显示alias grepgrep colorauto 命令语法格式：grep [选项] 参数文件名grep命令选项&#xff…...

编程日记 2023/3/1 0:18:31

C++STL详解（三）——vector的介绍和使用

文章目录vector的介绍vector的使用vector的定义方式vector的空间增长问题reserve和resizevector的迭代器使用begin 和endrbegin和rendinsert 和erasefind函数元素访问vector迭代器失效问题1：inserse插入扩容时空间销毁造成野指针问题2：erase删除或者inse…...

编程日记 2023/3/31 22:58:55

GEBCO海洋数据下载

一、数据集简介 GEBCO（General Bathymetric chart of the Oceans）旨在为世界海洋提供最权威的、可公开获取的测深数据集。目前的网格化测深数据集，即GEBCO_2022网格，是一个全球海洋和陆地的地形模型，在15角秒间隔的…...

编程日记 2023/3/20 10:50:40

【C++容器】vector、map、hash_map、unordered_map四大容器的性能分析【2023.02.28】

摘要 vector是标准容器对数组的封装，是一段连续的线性的内存。map底层是二叉排序树。hash_map是C11之前的无序map，unordered_map底层是hash表，涉及桶算法。现对各个容器的查询与”插入“性能做对比分析，方便后期选择。测试方案…...

编程日记 2023/3/1 0:14:50

ACM-蓝桥杯训练第一周

🚀write in front🚀 📝个人主页：认真写博客的夏目浅石.CSDN 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝 📣系列专栏：ACM周训练题目合集.CSDN 💬总结&#xff1a…...

编程日记 2023/3/17 11:42:07

python基础—字符串操作

（1）字符串： Python内置了一系列的数据类型，其中最主要的内置类型是数值类型、文本序列（字符串）类型、序列（列表、元组和range）类型、集合类型、映射（字典）类型…...

编程日记 2023/3/31 23:00:32

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2026/2/7 4:21:44

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...

编程新知 2026/1/27 13:20:11

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

GitHub 趋势日报 (2025年06月06日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

快刀集(1): 一刀斩断视频片头广告

一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。电影嘛，要沉浸，…...

编程新知 2026/1/8 0:40:27

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍给定一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O…...

编程新知 2026/2/1 20:47:10

深入border属性以及应用👏👏

画三角形👏

画扇形👏

画半圆👏

相关文章：