深入理解border以及应用

news2024/9/21 2:50:29

深入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.coloradmin.cn/o/377949.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何为三星active2手表安装自己DIY的表盘

如何为三星active2手表安装自己DIY的表盘

一、步骤介绍 Step 1. 下载Galaxy watch studio&#xff1b; Step 2. 按照up主“隔壁张师傅2022”的文章进行安装。 二、安装流程简单说明&#xff1a; ① 电脑端官网下载并安装Galaxy Watch Designer或者Galaxy Watch Studio程序。 ② 关闭手表蓝牙连接&#xff0c;并打开调…
阅读更多...
Spring中最常用的11个扩展点

Spring中最常用的11个扩展点

前言我们一说到spring&#xff0c;可能第一个想到的是 IOC&#xff08;控制反转&#xff09; 和 AOP&#xff08;面向切面编程&#xff09;。没错&#xff0c;它们是spring的基石&#xff0c;得益于它们的优秀设计&#xff0c;使得spring能够从众多优秀框架中脱颖而出。除此之外…
阅读更多...
【源码解析】SpringBoot的源码深入分析

【源码解析】SpringBoot的源码深入分析

SpringBoot源码分析 主流程 SpringBoot项目的组成是需要引入SpringBoot需要的依赖&#xff0c;另外启动类上添加SpringBootApplication&#xff0c;主要是标明该类是启动类和实现自动装配&#xff0c;自动装配的原理详细可见&#xff0c;SpringBoot自动装配的实现原理。那么m…
阅读更多...
Docker基本介绍

Docker基本介绍

最近需要将项目做成一个web应用并部署到多台服务器上&#xff0c;于是就简单学习了一下docker&#xff0c;做一下小小的记录。 1、简单介绍一下docker 我们经常遇到这样一个问题&#xff0c;自己写的代码在自己的电脑上运行的很流畅&#xff0c;在其他人电脑上就各种bug&…
阅读更多...
Linux学习--常用命令vi/vim

Linux学习--常用命令vi/vim

linux平台的文本编辑器 vi/vim的使用 vi windows的记事本 vim Windows的notepad 基本上vi/vim共分为三种模式&#xff0c;命令模式(Command mode)&#xff0c;输入模式(Insert mode)&#xff0c;底线命令模式(Last line mode) vim使用流程 1、下载vim yum install vim …
阅读更多...
【并发编程学习篇】深入理解CyclicBarrier

【并发编程学习篇】深入理解CyclicBarrier

一、CyclicBarrier介绍 字面意思回环栅栏&#xff08;循环屏障&#xff09;&#xff0c;通过它可以实现让一组线程等待至某个状态&#xff08;屏障点&#xff09;之后再全部同时执行。叫做回环是因为当所有等待线程都被释放以后&#xff0c;CyclicBarrier可以被重用。 和Count…
阅读更多...
动态规划：leetcode 70.爬楼梯、322.零钱兑换、279.完全平方数

动态规划：leetcode 70.爬楼梯、322.零钱兑换、279.完全平方数

leetcode 70.爬楼梯leetcode 322.零钱兑换leetcode 279.完全平方数leetcode 70.爬楼梯假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f;注意&#xff1a;给定 n 是一个正整数。示例 1&#xff1a; 输入…
阅读更多...
【C++】-- 智能指针

【C++】-- 智能指针

目录 智能指针意义 智能指针的使用及原理 RAII 智能指针的原理 std::auto_ptr std::auto_ptr的模拟实现 std::unique_ptr std::unique_ptr模拟实现 std::shared_ptr std::shared_ptr的模拟实现 循环引用问题 智能指针意义 #问&#xff1a;为什么需要智能指针&#…
阅读更多...
R语言绘制SCI论文中常见的箱线散点图，并自动进行方差分析计算显著性水平

R语言绘制SCI论文中常见的箱线散点图，并自动进行方差分析计算显著性水平

显著性标记箱线散点图 本篇笔记的内容是在R语言中利用ggplot2&#xff0c;ggsignif&#xff0c;ggsci&#xff0c;ggpubr等包制作箱线散点图&#xff0c;并计算指定变量之间的显著性水平&#xff0c;对不同分组进行特异性标记&#xff0c;最终效果如下。 加载R包 library(ggplo…
阅读更多...
SQL注入漏洞利用（上）

SQL注入漏洞利用（上）

SQL注入漏洞SQL注入漏洞SQL注入原理SQL注入带来的危害SQL注入分类数字型注入实操字符型注入实操类型检测and测试绕过密码&#xff1a;or 11 --搜索型注入实操SQL注入漏洞 攻击者利用Web应用程序对用户输入验证上的疏忽&#xff0c;在输入的数据中包含对某些数据库系统有特殊意…
阅读更多...
离散数学笔记_第一章：逻辑和证明（2 ）

离散数学笔记_第一章：逻辑和证明（2 ）

1.2 命题逻辑的应用1.2.1 语句翻译 1.2.2 系统规范说明 1.2.3 布尔搜索 1.2.4 逻辑谜题泥巴孩子谜题骑士和流氓&#xff08;考研逻辑题&#xff09;1.1.2.5 逻辑电路1.2.1 语句翻译 &#x1f433;为啥要翻译语句&#xff1f; ➡因语言常常有二义性&#xff08;有歧义&#x…
阅读更多...
Window.location 详细介绍

Window.location 详细介绍

如果你需要获取网站的 URL 信息&#xff0c;那么 window.location 对象就是为你准备的。使用它提供的属性来获取当前页面地址的信息&#xff0c;或使用其方法进行某些页面的重定向或刷新。 https://www.samanthaming.com/tidbits/?filterJS#2 window.location.origin → htt…
阅读更多...
Dbeaver连接Hive数据库操作指导

Dbeaver连接Hive数据库操作指导

背景&#xff1a;由于工作需要&#xff0c;当前分析研究的数据基于Hadoop的Hive数据库中&#xff0c;且Hadoop服务端无权限进行操作且使用安全模式&#xff0c;在研究了Dbeaver、Squirrel和Hue三种连接Hive的工具&#xff0c;在无法绕开useKey认证的情况下&#xff0c;只能使用…
阅读更多...
基于vscode开发vue项目的详细步骤教程

基于vscode开发vue项目的详细步骤教程

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 目录 五、vscode集成npm开发vue项目 1、vscode安装所需要的插件&#xff1a; 2、搭建一个vue小页面(入门vue) 3、大致理解…
阅读更多...
近期常见组件漏洞更新：

近期常见组件漏洞更新：

&#xff08;1&#xff09;mysql 5.7 在2023年1月17日&#xff0c;发布了到5.7.41版本 mysql 8.0 在2023年1月17日&#xff0c;发布了到8.0.32版本 MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/ &#xff08;2&#xff09;Tomcat8在202…
阅读更多...
react react-redux数据共享学习记录

react react-redux数据共享学习记录

react react-redux数据共享1.目的2.数据共享版本2.1Person模块的添加2.1.1 Containers下的Person2.1.2 actions下的person.js2.1.3 reducers下的person.js2.2 store.js的改写&#xff01;2.3 组件中取出状态的时候&#xff0c;记得“取到位”3.纯函数1.目的 前面的react和reac…
阅读更多...
精确光度预测计算工具:AGi32 Crack

精确光度预测计算工具:AGi32 Crack

什么是AGi32&#xff1f; AGi32首先是一种用于精确光度预测的计算工具&#xff1a;一种技术工具&#xff0c;可以计算任何情况下的照度&#xff0c;协助灯具放置和瞄准&#xff0c;并验证是否符合任意数量的照明标准。 然而&#xff0c;要增强对光度学结果的理解&#xff0c;还…
阅读更多...
创建SpringBoot注意事项

创建SpringBoot注意事项

作为一个java小白&#xff0c;你是否因为创建SpringBoot项目那些莫名其妙的错误搞得头皮发麻。不要慌张&#xff0c;这篇文章能帮你解决90%的问题【持续更新…】 本文结合创建SpringBoot项目的完整过程来讲 在idea中新建项目 虽然SpringBoot项目是由maven内核组成的&#xff0…
阅读更多...
【Linux驱动】驱动设计硬件基础----串口、I2C、SPI、以太网接口、PCIE

【Linux驱动】驱动设计硬件基础----串口、I2C、SPI、以太网接口、PCIE

1.前言 常见的外设接口与总线的工作方式&#xff0c;包括串口、I2C、SPI、USB、以太网接口、PCI和PCI-E、SD和SDIO等。 2.串口 RS-232、RS-422与RS-485都是串行数据接口标准&#xff0c;最初都是由电子工业协会&#xff08;EIA&#xff09;制订并发布的。 3.I2C I2C&…
阅读更多...
canvas复习笔记（绘制直线、矩形、圆形、圆弧）

canvas复习笔记（绘制直线、矩形、圆形、圆弧）

canvas 画一条直线 <body><canvasid"c"width"300"height"200"style"border: 1px solid #ccc;"></canvas> </body><script>// 2、获取 canvas 对象const cnv document.getElementById("c");…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023