Home >Web Front-end >HTML Tutorial >The problem of different colors for the top, bottom, left and right borders_html/css_WEB-ITnose
The problem of different colors for the top, bottom, left and right borders_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:551942browse
<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> In this way, the corners of the borders of different colors and the intersection of different colors will see obvious slashes
Ruhe can achieve such an effect
Reply to the discussion (solution)
There are two ways, one is to directly insert a clear tag, the other is to use the after selector.
<!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> This effect is much simpler using CSS3
If you don’t mind it, nest one layer to be compatible with old and new browsers:
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
080b747a20f9163200dd0a7d304ba388
.ps{border-left:15px red solid;} /* outer left border */
p.one {
border-style: solid;
border-width: 15px;
border-left:none;
min-height:50px;
position :relative;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d965c53bf53038624a2d850d371a2ef8b3bc077eea21c6afb869a61f09875cb6...94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e