深入理解border以及应用

news/2024/4/20 18:09:48/文章来源:https://blog.csdn.net/qq_62860882/article/details/129271099

深入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属性也有一个更深的理解了。👏👏👏👏

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_75448.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

k8s环境jenkins发布vue项目指定nodejs版本

k8s环境jenkins发布vue项目指定nodejs版本

k8s环境jenkins发布vue项目指定nodejs版本1、背景2、分析3、解决方法3.1、 找到配置镜像位置3.2、 制作新镜像3.3、 推送镜像到私有仓库3.4、 修改配置文件1、背景 发布一个前端项目&#xff0c;它需要nodejs 16.9.0版本支持&#xff0c;而kubesphere 3.2.0集成的jenkins 的镜…
阅读更多...
小米mix2s刷win11和android双系统

小米mix2s刷win11和android双系统

在给电脑安装系统的过程中&#xff0c;可能会因为各种原因出现windows无法安装的情况&#xff0c;我在给小米mix2s安装win11时发现出现了“计算机意外地重新启动或遇到错误&#xff0c;windows无法安装”的情况&#xff0c;下面就来教一下大家两种解决方法&#xff0c;希望可以…
阅读更多...
【解决办法】windows防火墙出入站规则放通telnet方法

【解决办法】windows防火墙出入站规则放通telnet方法

【操作方法】windows防火墙出站规则放通telnet方法一、出站规则1.新建出站规则中选择“程序”2.选择路径&#xff0c;点击“下一页”3.选择“允许连接”4.选择所有区域二、入站规则注&#xff1a;打开防火墙添加出入站规则参考【操作方法】windows防火墙添加出入站规则方法 一、…
阅读更多...
JUC(二)

JUC(二)

1.可重入锁–ReentrantLock原理 1.1.非公平锁的实现原理 1.1.1.加锁解锁流程 1>.先从构造器开始看,默认为非公平锁,可以在构造函数中设置参数指定公平锁 public ReentrantLock() {sync = new NonfairSync(); }public ReentrantLock
阅读更多...
【C++】STL 模拟实现之 list

【C++】STL 模拟实现之 list

文章目录一、list 的常用接口及其使用1、list 一般接口2、list 特殊接口3、list 排序的性能分析二、list 迭代器的实现1、迭代器的分类2、list 迭代器失效问题3、list 迭代器源码分析4、list 迭代器模拟实现4.1 普通迭代器4.2 const 迭代器4.3 完整版迭代器三、list 的模拟实现…
阅读更多...
十分钟学习nfs服务器

十分钟学习nfs服务器

NFS服务器简介 NFS的使用 权限参数 简易实验配置一&#xff1a; 要求&#xff1a;客户端借用nfs服务器可以同步服务端的文件 步骤&#xff1a;服务端配置&#xff08;/var/lib/nfs日志存放目录&#xff09; 创建文件&#xff1a;&#xff08;主配置文件有可能存在&#x…
阅读更多...
机器学习的特征归一化Normalization

机器学习的特征归一化Normalization

为什么需要做归一化&#xff1f; 为了消除数据特征之间的量纲影响&#xff0c;就需要对特征进行归一化处理&#xff0c;使得不同指标之间具有可比性。对特征归一化可以将所有特征都统一到一个大致相同的数值区间内。 为了后⾯数据处理的⽅便&#xff0c;归⼀化可以避免⼀些不…
阅读更多...
spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）

spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）

目录 一.前言&#xff1a; 二. 前端代码&#xff1a; 2.1.element ui组件代码 2.2删除按钮 2.3.data 2.4.methods 三.后端代码&#xff1a; 一.前言&#xff1a; 研究了其他人的博客&#xff0c;找到了一篇有含金量的&#xff0c;进行了部分改写实现前后端分离&#xff0…
阅读更多...
频率信号转电压或电流信号隔离变送器0-1KHz /0-5KHz /0-10KHz转0-2.5V/0-5V/0-20mA

频率信号转电压或电流信号隔离变送器0-1KHz /0-5KHz /0-10KHz转0-2.5V/0-5V/0-20mA

主要特性:>> 精度等级&#xff1a;0.2级>> 全量程内极高的线性度&#xff08;非线性度<0.1%&#xff09; >> 辅助电源/信号输入/信号输出&#xff1a; 2500VDC 三隔离>> 辅助电源&#xff1a;5VDC&#xff0c;12VDC&#xff0c;24VDC等单电源供电&g…
阅读更多...
SpringBoot项目启动成功后打印Banner

SpringBoot项目启动成功后打印Banner

SpringBoot项目启动成功后打印Banner 背景 可能有些同学看到就觉得&#xff0c;这个都要发文章&#xff1f;这不是整个banner.txt再配置一下spring.banner.locationclasspath:banner.txt就行了吗&#xff1f;还真不是&#xff0c;这个是在项目启动时&#xff0c;先打印的bann…
阅读更多...
Big_Data

Big_Data

Linux 计算机硬件软件体系 冯 诺依曼体系结构 计算机处理的数据和指令一律用二进制数表示 顺序执行程序 计算机硬件由运算器、控制器、存储器、输入设备和输出设备五大部分组成计算机硬件组成 输入设备输入设备用来将人们熟悉的信息形式转换为机器能够识别的信息形式常见的…
阅读更多...
人工智能写的十段代码，九个通过测试了

人工智能写的十段代码，九个通过测试了

“抢走你工作的不会是 AI &#xff0c;而是先掌握 AI 能力的人” 编程测试 1. 我想用golang实现二叉树前序&#xff0c;请你帮我写一下代码。 // 定义二叉树节点 type TreeNode struct {Val intLeft *TreeNodeRight *TreeNode }// 前序遍历 func PreOrderTraversal(root *Tre…
阅读更多...
Nvidia jetson nano硬件架构

Nvidia jetson nano硬件架构

资料来源 官方文档中心 https://developer.nvidia.com/embedded/downloads -> 选jetson -> Jetson Nano Product Design Guide //产品设计指导(入口) //-> 1.1 References 列出了相关的文档 -> Jetson Nano Developer Kit Carrier Board Specification //板子标注…
阅读更多...
torchserve安装、模型的部署与测试（基于docker）

torchserve安装、模型的部署与测试（基于docker）

问题描述 pytorch 一直很受大家的欢迎&#xff0c;但是作为一个深度模型&#xff0c;与外界复杂的业务需求交互其实是一件比较麻烦的事情&#xff0c;这里 torchserve 提供一个基于 TCP 的交互方法&#xff0c;算法模型部署后&#xff0c;用户可以通过提交 post 请求&#xff…
阅读更多...
Linux服务器磁盘分区、挂载、卸载及报错处理

Linux服务器磁盘分区、挂载、卸载及报错处理

整体操作是&#xff1a;先对磁盘进行格式化&#xff0c;格式化后挂载到需要的挂载点&#xff0c;最后添加分区启动表&#xff0c;以便下次系统启动时自动挂载。一、linux分区1、Linux来说wulun有几个分区&#xff0c;分给哪一目录使用&#xff0c;他归根结底只有一个根目录&…
阅读更多...
549、RocketMQ详细入门教程系列 -【消息队列之 RocketMQ（三）】 2023.02.28

549、RocketMQ详细入门教程系列 -【消息队列之 RocketMQ（三）】 2023.02.28

目录一、Spring 整合 RocketMQ1.1 消息生产者1.2 消息消费者1.3 Spring 配置文件1.4 运行实例程序二、参考链接一、Spring 整合 RocketMQ 不同于 RabbitMQ、ActiveMQ、Kafka 等消息中间件&#xff0c;Spring 社区已经通过多种方式提供了对这些中间件产品集成&#xff0c;例如通…
阅读更多...
Linux | 2. 用户管理

Linux | 2. 用户管理

如有错误&#xff0c;恳请指出。 1. 设置文件权限 权限设置如下&#xff1a; root表示文件所有者&#xff0c;stud1表示文件所属组。其他用户无法访问。更改指令是chown。 更改目录文件所属组&#xff1a;chown .lab lossfound/更改目录文件所有者&#xff1a;chown lab loss…
阅读更多...
html实现浪漫的爱情日记（附源码）

html实现浪漫的爱情日记（附源码）

文章目录1.设计来源1.1 主界面1.2 遇见1.3 相熟1.4 相知1.5 相念2.效果和源码2.1 动态效果2.2 源代码2.3 代码结构源码下载更多爱情表白源码作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/129264757 html实现浪漫的爱情…
阅读更多...
Javaweb复习之HTTPTomcatServelet

Javaweb复习之HTTPTomcatServelet

1.Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 JavaWeb就是用Java技术来解决相关web互联网领域的技术栈 1.2 JavaWeb技术栈 B/S 架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器 架构模…
阅读更多...
Linux: malloc()的指向指针发生指向偏移后，释放前需要将指针指向复原。

Linux: malloc()的指向指针发生指向偏移后，释放前需要将指针指向复原。

Linux: malloc()的指向指针发生指向偏移后&#xff0c;释放前需要将指针指向复原。 #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <string.h> #include <time…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023