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

深入理解border以及应用

深入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属性以及应用&#x1f44f;&#x1f44f; border这个属性在开发过程中很常用&#xff0c;常常用它来作为边界的。但是大家真的了解border吗&#xff1f;以及它的形状是什么样子的。 我们先来看这样一段代码&#xff1a;&#x1f44f; <!--* Author: syk 185901…...

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

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

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&#xff0c;使之满足&#xff1a; 1≤k≤n−11 \leq k \leq n-11≤k≤n−1 , anda1⋅a2⋅……...

Learining C++ No.12【vector】

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

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

目录 1.概念 1.基本逻辑概念 2.基本逻辑电路&#xff08;与或非&#xff09; 逻辑与运算 与门电路&#xff1a; 逻辑或运算 或门电路&#xff1a; ​逻辑非运算&#xff08;逻辑反&#xff09; 非门电路​编辑 3.复合逻辑电路&#xff08;运算&#xff09; 与非逻辑…...

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

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

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

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

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

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

Java异常

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

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

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

mac 中 shell 一些知识

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

CentOS 配置FTP(开启VSFTPD服务)

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

Http的请求方法

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

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

字典 ~~不定时更新&#x1f383;&#xff0c;上次更新&#xff1a;2023/02/28 &#x1f5e1;常用函数&#xff08;方法&#xff09; 1. dic.get(key) --> 判断字典 dic 是否有 key&#xff0c;有返回其对应的值&#xff0c;没有返回 None 举个栗子&#x1f330; dic …...

文本处理工具

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

C++STL详解(三)——vector的介绍和使用

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

GEBCO海洋数据下载

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

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

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

ACM-蓝桥杯训练第一周

&#x1f680;write in front&#x1f680; &#x1f4dd;个人主页&#xff1a;认真写博客的夏目浅石.CSDN &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​ &#x1f4e3;系列专栏&#xff1a;ACM周训练题目合集.CSDN &#x1f4ac;总结&#xff1a…...

python基础—字符串操作

&#xff08;1&#xff09;字符串&#xff1a; Python内置了一系列的数据类型&#xff0c;其中最主要的内置类型是数值类型、文本序列&#xff08;字符串&#xff09;类型、序列&#xff08;列表、元组和range&#xff09;类型、集合类型、映射&#xff08;字典&#xff09;类型…...

【Spring】通过JdbcTemplate实现CRUD操作

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 通过JdbcTemplate实现 增删查改一、添加相关依…...

实战|掌握Linux内存监视:free命令详解与使用技巧

文章目录前言一. free命令介绍二. 语法格式及常用选项三. 参考案例3.1 查看free相关的信息3.2 以MB的形式显示内存的使用情况3.3 以总和的形式显示内存的使用情况3.4 周期性的查询内存的使用情况3.5 以更人性化的形式来查看内存的结果输出四. free在脚本中的应用总结前言 大家…...

嵌入式入门必看!调试工具安装——基于 AM64x核心板

本章节内容是为评估板串口安装USB转串口驱动程序。驱动适用于CH340、CH341等USB转串口芯片。 USB转串口驱动安装 适用安装环境:Windows 7 64bit、Windows 10 64bit。 本文测试板卡为创龙科技SOM-TL64x核心板,它是一款基于TI Sitara系列AM64x双核ARM Cortex-A53 + 单/四核Cort…...

JAVA开发(java类加载过程)

1、java语言的平台无关性。 因为java语言可以跑在java虚拟机上&#xff0c;所以只要能装java虚拟机的地方就能跑java程序。java语言以后缀名 .java为文件扩展名。通过java编译器javac编译成字节码文件.class 。java字节码文件通过java虚拟机解析运行。所以java语言可以说是编译…...

【vulhub漏洞复现】Thinkphp 2.x 任意代码执行

一、漏洞详情影响版本 thinkphp 2.x但是由于thinkphp 3.0版本在Lite模式下没有修复该漏洞&#xff0c;所以也存在该漏洞漏洞原因&#xff1a;e 和 /e模式匹配路由&#xff1a;e 配合函数preg_replace()使用, 可以把匹配来的字符串当作正则表达式执行; /e 可执行模式&#xff0c…...

LeetCode 1145. 二叉树着色游戏 -- 简单搜索

二叉树着色游戏 提示 中等 199 相关企业 有两位极客玩家参与了一场「二叉树着色」的游戏。游戏中&#xff0c;给出二叉树的根节点 root&#xff0c;树上总共有 n 个节点&#xff0c;且 n 为奇数&#xff0c;其中每个节点上的值从 1 到 n 各不相同。 最开始时&#xff1a; 「一…...

HyperGBM的三种Early Stopping方式

本文作者&#xff1a;杨健&#xff0c;九章云极 DataCanvas 主任架构师 很多机器学习框架如都提供了Early Stopping策略&#xff0c;主要用来防止模型过拟合。和模型训练提前停止的目标不同&#xff0c;AutoML的Early Stopping策略更多考虑的是算力消耗和模型质量的平衡。 通…...

心系区域发展,高德用一体化出行服务平台“聚”力区域未来

交通&#xff0c;是城市的血脉。通过对人、资源、产业的连接&#xff0c;交通建设往往是城市和区域经济发展的前提。不过&#xff0c;在度过了“要想富&#xff0c;先修路”的初级建设阶段后&#xff0c;交通产业内部也出现了挑战&#xff0c;诸如城市秩序、发展成本、用户使用…...

AI画图_stable-diffusion-webui安装使用指南(1)

本文章适用于: 有一定学习能力和钻研能力&#xff0c;遇到问题能合理使用搜索引擎尝试解决问题的人想在windows系统中尝试使用AI作画工具stable-diffusion-webui进行绘画的人有一定的计算机基础&#xff08;会魔法上网、知道 python和Git&#xff09;和英文阅读能力的人显卡为…...

浅谈MySQL主从复制

目录 1.MySQL主从复制是什么 2.MySQL主从复制的意义 3.MySQL主从复制原理 4.数据同步一致性问题 5.实现方式 1.MySQL主从复制是什么 MySQL主从复制就是指数据可以从一台MySQL的主节点复制到一个或多个从节点。 MySQL默认采用异步复制方式&#xff0c;这样从节点不用一直访…...

网站空间怎么收费/电商网站规划

取决于stl的实现版本&#xff0c;&s[0]不一定是连续的。不强制要求内部实现是怎么做的&#xff0c;不过.c_str()和.data()返回的视图必须是保证连续的&#xff1f;&#xff1f;...

三合一网站选什么系统/seo网络优化软件

变形转换 属性&#xff1a;transfrom 1.Translate----位移 概念 该属性值可以让元素从当前位置根据X轴Y轴&#xff0c;在水平和垂直方向进行移动。 注意&#xff1a; 在浏览器中一般只要说到x,y轴&#xff0c;那么基本是都是以下面方式计算原点和方向 原点&#xff1a; 元素…...

国外免费网站做推广/俄罗斯搜索引擎yandex推广

小哼买书&#xff08;C&Java实现&#xff09; 本篇博客主要是《啊哈&#xff01;算法》的读书笔记&#xff0c;一本很好的算法书&#xff0c;这里做一下记录。 分别利用三种算法解小哼买书问题&#xff0c;主要依据书中代码&#xff0c;顺带写了一下Java语言的实现。 1、桶…...

手机网站建设技术方案/建网站找哪个平台好呢

1.作业题目&#xff1a; 原生python实现knn分类算法&#xff0c;用鸢尾花数据集 2.算法分析&#xff1a; 最简单最初级的分类器是将全部的训练数据所对应的类别都记录下来&#xff0c;当测试对象的属性和某个训练对象的属性完全匹配时&#xff0c;便可以对其进行分类。但是怎么…...

小程序开发北京华网天下首选/合肥seo管理

是否被整除 时间限制&#xff1a;1000 ms | 内存限制&#xff1a;65535 KB难度&#xff1a;2描述一个位数不大于100万位的正整数&#xff0c;如果它既能被11整除又能被2的n次方整除就输出YES否则输出NO 输入输入有多组数据每组数据有两行第一行一个n代表2的n次方&#xff08;…...

wordpress批量信息导入工具/小程序免费制作平台

前言最近有幸跟随资深ThoughtWorks咨询师熊节老师一起学习测试驱动设计&#xff0c;经过短暂的十几天培训&#xff0c;对测试驱动设计的基本原则、实践模式、技巧有了一点点初步的认识。 在此之前&#xff0c;经常自嘲我经历的公司实践也似乎是TDD&#xff0c; 这种实践往往都…...