border的属性
1.border-width：不支持百分比，支持关键字，thin（1px），medium（默认值，3px，默认值是3px的原因是只有当border是3px及以上时，border-style才有效
果），thick（5px）
2.border-style:有不同值，下面分析分别为不同值时的应用
a.solid：可以实现三角，梯形
<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>
b.dashed:虚线，在chrome/Firefox浏览器中，虚线和实线的比例是3:1（稀），在IE浏览器中，比例是2：1（密）
c.dotted:点线，在chrome/Firefox浏览器中，是方点，在IE浏览器中，是圆点（可以利用圆点实现圆角效果）
d.double:双线,计算规则，双线宽度永远相等，中间间隔+-1，例如，3px=1（内）+1（中间间隔）+1（外），可以实现三道杠图形。
e.inset（内凹）,outset（外凸）,ridge（沟槽）:风格过时，兼容性差，没有什么使用场景
3.border-color：在不指定color时，使用color作为边框色，可以利用这一特性，简化链接改变颜色时的css样式代码。例如：
<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/* border:1px solid;*/ }
</style></head><body><p class="a">哈哈</p></body></html>
4.利用border可以实现背景图像的定位，因为背景图像在定位时是不计算border的
5.利用border实现等高布局，缺点是不支持百分比宽度
（4,5类似，都是利用border，使得与某侧距离固定）
以上是关于CSS之border属性的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践Mar 08, 2025 am 09:45 AM这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章，请查看“以：focus-visible的管理用户焦点”。在
使用智能表单框架创建JavaScript联系表格Mar 07, 2025 am 11:33 AM本教程演示了使用智能表单框架创建外观专业的JavaScript表单（注意：不再可用）。 尽管框架本身不可用，但原理和技术仍然与其他形式的建筑商相关。
将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PMCSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例，以及我们必须将这些样式应用于WordPress块和元素的选项。
比较5个最佳的PHP形式构建器（和3个免费脚本）Mar 04, 2025 am 10:22 AM本文探讨了Envato Market上可用的PHP表单构建器脚本，比较了其功能，灵活性和设计。 在研究特定选项之前，让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式
使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
SublimeText3汉化版
中文版，非常好用
