认识border_border内边框-程序员宅基地

技术标签： css  

border就是边框。边框有三个要素：粗细、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

<style>
div{
padding: 0;
}
.box{
width: 300px;
height: 300px;
/* 边框的3个要素，其中颜色，可以省略不写。不写默认是黑色。 */
border: 3px solid;
}
</style>
</head>
<body>
<div class="box">
 
</div>

线型的设置：

/* dotted点虚线 */
border: 3px dotted blue;

/* dashed矩形虚线 */
border: 3px dashed blue;

/* solid实线 */
border: 3px solid blue;

/* double内外双实线 */
border: 3px double blue;

/* groove沟槽状边框 */
border: 50px groove blue;

/* ridge菱形边框 */
border: 50px ridge blue;

可以发现菱形边框与沟槽状边框的区别是亮面和暗面相反

/* inset3D凹边 */
border: 50px inset blue;

/* outset3D凸边 */
border: 50px outset blue;

凹凸边的亮暗也是相反的

不过线型在不同浏览器有不同的显示效果比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别：

chrome：

firefox：

IE：

谷歌和火狐差别不大，但ie的颜色明显深了很多

border属性能够被拆开

border是一个大综合属性，

border:1px solid red;  

border属性能够被拆开，有两大种拆开的方式：1） 按3要素:border-width、border-style、border-color2） 按方向：border-top、border-right、border-bottom、border-left

把边框border按3要素：

<style>
.box{
width: 300px;
height: 300px;
/* 按3要素拆开: */
border-width: 30px;
border-style: solid;
border-color: aqua;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序

/* 10px 20px ---上下10  左右20 */
border-width: 10px 20px;
/* solid dashed dotted --- 上solid  左右dashed  下dotted */
border-style: solid dashed dotted;
/* red green blue yellow --- 上red  右green 下blue 左yellow */
border-color:red green blue yellow ;

把边框border按方向来拆开

<style>
.box{
width: 300px;
height: 300px;
/* 按照方向拆分 */
border-top: 30px solid red;
border-right: 30px solid green;
border-bottom: 30px solid blue;
border-left: 30px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

把边框border按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

/* 边框按方向还能再拆一层把每个方向按照3要素写 */
border-top-width:30px;
border-top-style:solid;
border-top-color:red;
border-right-width: 30px;
border-right:solid;
border-right-color:green;
border-bottom-width: 30px;
border-bottom-style: solid;
border-bottom-color: aqua;
border-left-width: 30px;
border-left-style:solid;
border-left-color:blue;

border可以没有

<style>
.box{
width: 300px;
height: 300px;
background-color: red;
/* 4个边都没有边框 */
/* border: none; */
 
border:30px solid blue;
/* 某一个边没有边框 */
border-left: none;
}
</style>
</head>
<body>
<div class="box">盒子</div>

outline轮廓线

outline轮廓线 在边框线的外面，它和盒模型没有任何关系。轮廓线不占据页面宽度。

去除input文本框的轮廓线：outline: none;

<style>
.txt{
width: 300px;
height: 26px;
line-height: 26px;
border: 1px solid greenyellow;
outline: none;
}
</style>
</head>
<body>
<input type="text" name="" id="" class="txt">
</body>

轮廓线不占据页面宽度。

outline: 20px solid orange;

 

所以，我们在实际项目中编写页面的时候，我们通常使用outline轮廓线去查看当前某个区块在页面中的位置。

border可以透明

透明是让颜色不可见，但是具体的某个方向的边框实际在浏览器渲染的时候，边框还是存在。

<style>
.box{
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-right: 200px solid green;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

border制作小箭头：

<style>
.arrow{
width: 20px;
height: 20px;
border-top: 1px solid red;
border-left: 1px solid red;
transform: rotate(45deg);
margin: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>

如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度，得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度.

  1. 小三角形的大小由正方形的宽高去控制

  2. 小三角形的粗细由border边框线的宽度去控制

  3. 小三角形的颜色由border边框线的颜色去控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53632966/article/details/128196634

智能推荐

这6种最佳移动自动化测试工具你知道吗？_移动应用测试工具有哪些-程序员宅基地

文章浏览阅读1k次。它还带有一个客户端库的特性，可以托管 Java、Python、C# 等中的锅炉代码，以帮助 QA 更快、更有效地开发测试脚本。testRigor 是超级可靠的，因为它为人类各自创建了一个测试套件，也就是说，它不依赖于 XPath 之类的源。它是一个基于云的移动自动化测试工具，允许用户在各种设备和操作系统版本上以连续的时间间隔快速运行测试。总而言之，它是一个很好的工具，但既不是免费的也不是开源的。ZAPTEST 的卖点是它的投资回报率计算器，它允许像您这样的企业计算这种自动化工具的投资回报率。_移动应用测试工具有哪些

分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测_nn.multiheadattention 图像分类-程序员宅基地

文章浏览阅读1.1k次，点赞21次，收藏12次。分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测_nn.multiheadattention 图像分类

对称加密、非对称加密、公钥、私钥究竟是个啥？_非对称加密,私钥公钥成对生成是啥意思-程序员宅基地

文章浏览阅读1.3w次，点赞72次，收藏247次。世界上有没有不能破解的密码或加密方式？还真有一种，叫做一次性密码本，这时唯一一种不能破解的加密方式，而其他的密码只要时间无限理论上都是可破解的，如果你也对加密这个领域感兴趣，可以简单了解下这些概念..._非对称加密,私钥公钥成对生成是啥意思

linux系统的字体文件安装_目标'usr/share/fonts/' 不是目录-程序员宅基地

文章浏览阅读1.3k次。ubuntu里新装的terminator里，字体实在是不忍直视。尤其是字母i，跟别的字母挤在一起，根本就看不清楚。所以特意下载了一个苹果的Monaco字体来代替。linux系统的字体文件放在/usr/share/fonts/目录以及用户的~/.fonts和~/.local/share/fonts目录下，第一个位置为系统所用用户共享，将字体安装到这个目录需要管理员权限；后面两个位置则为当前登陆用户..._目标'usr/share/fonts/' 不是目录

<Android> 系统编译删除不必要的Apk_android 去掉product_packages 属性-程序员宅基地

文章浏览阅读5.3k次，点赞2次，收藏8次。本文以Android 5.1的A83T octopus-f1工程为例.预装APK分为四种priv-app, preinstall, precopy, appout/target/product/octopus-f1/system/priv-app 系统默认APPout/target/product/octopus-f1/system/app 用户APPout/targe_android 去掉product_packages 属性

台湾油研功率放大器AMN-D-20T_油研amnd20放大器中文说明书-程序员宅基地

文章浏览阅读424次。控制阀类型有先导溢流阀EDG，比例压力阀EBG，比例减压阀ERBG，10Ω系列比例流量阀EFCG，节能阀10Ω线圈EFBG，10Ω比例线圈用的小型功率放大器，供给电源DC24V.采用新回路方式，低发热功率放大器。_油研amnd20放大器中文说明书

随便推点

Machine and Deep Learning with Python-程序员宅基地

文章浏览阅读407次。Machine and Deep Learning with PythonEducationTutorials and coursesSupervised learning superstitions cheat sheetIntroduction to Deep Learning with PythonHow to implement a neural network..._pyqtgraph eeg

QNX操作系统简介_openqnx-程序员宅基地

文章浏览阅读2.4w次，点赞17次，收藏119次。QNX是商业类Unix实时操作系统，主要针对嵌入式系统市场。该产品开发于20世纪80年代初，后来改名为QNX软件系统公司。QNX软件系统公司，黑莓公司旗下子公司，是全球领先的创新嵌入式技术供应商，包括中间件、开发工具和操作系统。QNX Neutrino实时操作系统，QNX Momentics工具套件和QNX Aviage中间件系列基于组件的架构共同构成业界可靠性和延展性最强的架构，帮助建立高性能的..._openqnx

OpenGL纹理-12.5、纹理坐标-程序员宅基地

文章浏览阅读227次。12.5、纹理坐标12.5.1 坐标定义在绘制纹理映射场景时，不仅要给每个顶点定义几何坐标，而且也要定义纹理坐标。经过多种变换后，几何坐标决定顶点在屏幕上绘制的位置，而纹理坐标决定纹理图像中的哪一个纹素赋予该顶点。并且顶点之间的纹理坐标插值与基础篇中所讲的平滑着色插值方法相同。纹理图像是方形数组，纹理坐标通常可定义成一、二、三或四维形式，称为s，..._opengl 定义纹理坐标

如何设置代理ip服务器地址_代理服务器地址-程序员宅基地

文章浏览阅读711次。代理IP服务器具有很多优点和使用场景，在未来的发展中，随着网络技术的不断进步和应用场景的不断扩展，代理IP服务器将会发挥更加重要的作用。_代理服务器地址

用伪随机生成100个大写字母和100个个位数字_vb生成100个大写字母-程序员宅基地

文章浏览阅读294次。#include#include#includeusing namespace std;void RandomCharacter();void RandomFingure();int main(void){ RandomCharacter(); cout<<

Spring / Spring boot 异步任务编程 WebAsyncTask_spring boot webasynctask-程序员宅基地

文章浏览阅读372次。Spring / Spring boot 异步任务编程 WebAsyncTask今天一起学习下如何在Spring中进行异步编程。我们都知道，web服务器处理请求request的线程是从线程池中获取的，这也不难解释，因为当web请求并发数非常大时，如何一个请求进来就创建一条处理线程，由于创建线程和线程上下文切换的开销是比较大的，web服务器最终将面临崩溃。另外，web服务器创建的处理线程从头到尾默认是同步执行的，也就是说，假如处理线程A负责处理请求B，那么当B没有return之前，处理线程A是不可以脱身去_spring boot webasynctask

推荐文章

热门文章

相关标签