开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS border-top-style 演示</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #333; text-align: center; } .border-demo { margin: 20px 0; padding: 15px; background-color: #f9f9f9; border-top-width: 5px; border-top-color: #3498db; margin-bottom: 30px; } .label { font-weight: bold; margin-bottom: 5px; color: #2c3e50; } .code { font-family: monospace; background-color: #eee; padding: 2px 4px; border-radius: 3px; } </style> </head> <body> <h1>CSS border-top-style 属性演示</h1> <div class="border-demo" style="border-top-style: dotted;"> <div class="label">dotted - 点线边框</div> <div class="code">border-top-style: dotted;</div> </div> <div class="border-demo" style="border-top-style: dashed;"> <div class="label">dashed - 虚线边框</div> <div class="code">border-top-style: dashed;</div> </div> <div class="border-demo" style="border-top-style: solid;"> <div class="label">solid - 实线边框</div> <div class="code">border-top-style: solid;</div> </div> <div class="border-demo" style="border-top-style: double;"> <div class="label">double - 双线边框</div> <div class="code">border-top-style: double;</div> </div> <div class="border-demo" style="border-top-style: groove; border-top-color: #3498db #2980b9;"> <div class="label">groove - 3D凹槽边框（效果取决于边框颜色）</div> <div class="code">border-top-style: groove;</div> </div> <div class="border-demo" style="border-top-style: ridge; border-top-color: #3498db #2980b9;"> <div class="label">ridge - 3D凸脊边框（效果取决于边框颜色）</div> <div class="code">border-top-style: ridge;</div> </div> <div class="border-demo" style="border-top-style: inset; border-top-color: #3498db #2980b9;"> <div class="label">inset - 3D内嵌边框（效果取决于边框颜色）</div> <div class="code">border-top-style: inset;</div> </div> <div class="border-demo" style="border-top-style: outset; border-top-color: #3498db #2980b9;"> <div class="label">outset - 3D外凸边框（效果取决于边框颜色）</div> <div class="code">border-top-style: outset;</div> </div> <div class="border-demo" style="border-top-style: none;"> <div class="label">none - 无边框</div> <div class="code">border-top-style: none;</div> </div> <div class="border-demo" style="border-top-style: hidden;"> <div class="label">hidden - 隐藏边框（在表格中与none表现不同）</div> <div class="code">border-top-style: hidden;</div> </div> </body> </html>
运行结果：
