Home > Article > Web Front-end > 边框上下左右不同颜色的问题_html/css_WEB-ITnose
边框上下左右不同颜色的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:551897browse
<html><head><style type="text/css">p.one {border-style: solid;border-width: 15px;border-left-color:red;min-height:50px;}</style></head><body><p class="one">...</p></body></html> 这样不同颜色的边框的角 不同颜色交界的地方 会看出来 很明显的斜线
如和能实现这样的效果
回复讨论(解决方案)
两种办法，一种是直接插入一个明标签，另外一种是用after这个选择器。
<!DOCTYPE html><html><head> <style type="text/css"> p.one{ border-style: solid; border-width: 15px; min-height:50px; position:relative; } p i{ position:absolute;min-height:80px;width:15px;top:-15px;left:-15px;background:red;} p:after{ content:'';position:absolute;min-height:80px;width:15px;top:-15px;right:-15px;background:red; } </style></head><body><p class="one"><i></i>...</p></body></html> 这种效果，使用CSS3的方式就简单多啦
如果不嫌麻烦，嵌套一层，兼容新旧浏览器：
...
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何利用CSS代码使图片和文字在同一行显示且对齐_html/css_WEB-ITnoseNext article：两个span标签隐藏后再显示不在同一行_html/css_WEB-ITnose