Heim > Web-Frontend > HTML-Tutorial > 边框上下左右不同颜色的问题_html/css_WEB-ITnose

边框上下左右不同颜色的问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:38:55
Original
1938 Leute haben es durchsucht

<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>
Nach dem Login kopieren


这样不同颜色的边框的角 不同颜色交界的地方 会看出来 很明显的斜线
如和能实现这样的效果


回复讨论(解决方案)

两种办法,一种是直接插入一个明标签,另外一种是用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>
Nach dem Login kopieren

这种效果,使用CSS3的方式就简单多啦

如果不嫌麻烦,嵌套一层,兼容新旧浏览器:







...








Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage