搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS 教程
CSS 盒子模型
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example of CSS border-color property</title> <style> p.one { border-style: solid; border-color: #ff0000; } p.two { border-style: solid; border-color: #ff0000 #00ff00; } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff; } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff; } </style> </head> <body> <p class="one"> <strong>单值语法</strong>：单个值设置所有四个边框的颜色。</p> <p class="two"> <strong>二值语法</strong>：第一个值设置顶部和底部边框的颜色，第二个值设置右侧和左侧边框的颜色。</> <p class="three"> <strong>三值语法</strong>：第一个值设置顶部边框的颜色，第二个值设置左右边框的颜色，第三个值设置 底部边框的颜色。</p> <p class="four"> <strong>四值语法</strong>：每个值都按上，右，下和左的顺序分别设置边框的颜色。</p> <p> <strong>注意</strong>：您必须在<code> border-color </code>属性之前声明<code> border-style </code>属性。 元素必须具有边框，然后才能设置边框的颜色。</p> </body> </html>
运行结果
