border-left、border-right、border-top、border-bottom深入理解-程序员宅基地

技术标签: css  border深入理解  

一、有宽和高

1.一个矩形的4个边的组成部分

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
    border-top: 55px solid green;
}

由图可知,4个border其实都是等腰梯形

2.3个border

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
}

由上图可知,当只有3个border时,缺口部分不再是斜的,变成了水平线。

3。同理当只有2个border时,切口全部变成水平或者垂直

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
}

.box {
  border-top: 55px solid red;
  width: 200px;
  height: 200px;
  border-bottom: 55px solid blue;  
}

二、宽和高有一个为0

1.宽不为0,高为0

(1)4个边

2.3个边

3.2个边

4.有宽,有border-top或者border-bottom。有高,有border-left或者border-right

5.其他 无

(2) 宽为0,高为0

1.4个border

2.3个border

3.2个border(相邻)

4.其他无

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cotexarm7/article/details/89361556

智能推荐

第1章 统计学习及监督学习概论-程序员宅基地

文章浏览阅读393次。1 统计学习统计学习是关于计算机基于数据构建概率统计模型并运用模型对数据进行预测与分析的一门学科。2 统计学习的分类统计学习或机器学习涵盖内容较多,分类角度也不同。(1)基本分类一般分为监督学习、无监督学习、强化学习,有时还会有半监督学习和主动学习。监督学习:从标注数据中学习预测模型的机器学习问题。无监督学习:从无标注数据中学习预测模型的机器学习问题。强化学习:智能...

批量爬取链家房源信息_链家批量数据可以去哪拿-程序员宅基地

文章浏览阅读894次。Python 爬虫get请求http get请求:明文向服务器发起资源获取的请求post:向服务器传递信息get:向服务器获取信息get请求常见使用方法:  urllib get  requests get在爬虫方向  除了模拟登陆之外,大部分的请求是get1、get请求常见使用方法  网站分类  网站分页  搜索关键字  瀑布流参数2、get请求的格式:  Get请..._链家批量数据可以去哪拿

LayoutInflater 动态加载布局_layoutinflater 添加布局-程序员宅基地

文章浏览阅读555次。做了两个多月的开发 今天终于有时间静下心来写点东西了 好好整理一下自己的 代码 做一下总结 项目用了本地原生与网页WebView混合开发模式。这个方法有利有弊,好处是容易管理 好多的修改可以直接在网页上更改,不需要重新发布新版本,当然弊端就是通过webview显示网页这样对网络的需求非常严格,一旦网络不好用户体验非常不好,那么LayoutInflater 就管用啦 Layout_layoutinflater 添加布局

调用亚马逊插件keepa数据的API获取产品的历史信息_keepa api-程序员宅基地

文章浏览阅读5.7k次,点赞8次,收藏17次。1.https://keepa.com/#! 这个是keepa的官网,首先你需要注册购买其服务。相对于他能提供的亚马逊的大量数据,这些钱花的超值。2.这里以日本站的数据获取为例。https://www.amazon.co.jp/dp/B003G357L0在这个插件中你可以获取历史的排名以及价格、评论的变化情况。3.这里使用的是Python调用其API的数据,keepa的首席执行官给的开..._keepa api

Pollard’s rho 算法解大数质因子问题_phllard鈥檚 rho-程序员宅基地

文章浏览阅读275次。Pollard’s rho 算法解大数质因子问题1. Pollard's rho 算法2. 将Pollard's rho应用在大数质因子分解问题1. Pollard’s rho 算法在大数质因子问题中, 一般被分解的数十分大,使用试除法的时间代价很大, Pollard’s rho算法有效的缓解了试除法的时间代价.生日悖论: 在不少于 23 个人中至少有两人生日相同的概率大于 50%(百度百科).那么要是人数再多一些是不是存在可能在一定人数中一定有人生日相同? 那么将这么理论应用在数学问题中,假如有n_phllard鈥檚 rho

VScode配置verilog环境_vscode verilog code=0是什么意思-程序员宅基地

文章浏览阅读5.1k次,点赞2次,收藏11次。VScode配置verilog环境功能快捷键一些常用插件和配置可以参考此链接vivado默认的编辑器用起来不舒服,遂使用vscode,配置过程中看了些分享,遇到了一些问题,记录在这里,希望有所帮助。一个方便的文件包,有详细的pdf文档及所需的扩展附属文件(上传资源还在审核,以后加)功能快捷键容易找到,此处不列举了。一些常用插件和配置可以参考此链接链接: vscode全部报错_用VSCode编辑verilog代码、iverilog编译、自动例化、自动补全、自动格式化等常用插件….文章中有个问题_vscode verilog code=0是什么意思

随便推点

参数和超参数_参数与超参数举例-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏11次。欢迎关注博主的公众号:happyGirl的异想世界。有更多干货还有技术讨论群哦~举例说明一些机器学习算法中的普通参数和超参数:机器学习算法 普通参数举例 超参数举例 决策树 在每个节点上选择的输入变量、每个节点上选择的阈值 每个叶节点所应包括的最少数据量,训练后的剪枝(pruning)策略 随机森林 同上 决策树的数量,输入变量的数量 支持向量机 支持向量(support vector)的选择,每个支持向量的拉格朗日乘数 核(kernel)_参数与超参数举例

静态链表-程序员宅基地

文章浏览阅读161次。参考链接:http://data.biancheng.net/view/163.html静态链表中的节点静态链表存储数据元素也需要自定义数据类型,至少需要包含以下 2 部分信息:数据域:用于存储数据元素的值; 游标:其实就是数组下标,表示直接后继元素所在数组中的位置;因此,静态链表中节点的构成用 C 语言实现为:typedef struct { int data;//...

对Oracle 、SQL Server、MySQL、PostgreSQL数据库优缺点分析_()数据库的优点是可移植性好、使用方便、功能强,适用于各类环境-程序员宅基地

文章浏览阅读4.2w次,点赞18次,收藏104次。对Oracle 、SQL Server、MySQL、PostgreSQL数据库优缺点分析 Oracle DatabaseOracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统,系统可移植性好、使用方便、功能强,适用于各_()数据库的优点是可移植性好、使用方便、功能强,适用于各类环境

实用的注册表技巧-程序员宅基地

文章浏览阅读233次。注册表被禁用隐藏文件无法显示禁用显示隐藏文件任务管理器被禁用U盘被禁用windows时间线被禁用应用程序镜像劫持开机自启动目录鼠标右键被禁用隐藏磁盘禁用“运行”禁用 “关机”HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies

Python pip 国内镜像大全 三方库_常见的pillow镜像源-程序员宅基地

文章浏览阅读348次。PYPI国内源路径阿里云 http://mirrors.aliyun.com/pypi/simple/豆瓣(douban) http://pypi.douban.com/simple/清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple/前二个目前最常用..._常见的pillow镜像源

Oracle数据库临时表空间问题_oracle 数据文件开启 autoextensible dba_free_space 空间不对-程序员宅基地

文章浏览阅读668次。笔者在日常系统检查时,通过oracle Enterprise Manager Console检查数据库表空间使用情况,发现系统表空间使用率100% ,而且每个用户所对应临时表空间为系统表空间。发现此情况后,为了不影响系统正常运行对此问题进行检查。 1、通过sql查看数据库临时表空间、用户对应的临时表空间、系统默认临时表空间 s_oracle 数据文件开启 autoextensible dba_free_space 空间不对

推荐文章

热门文章

相关标签