配合after、before伪元素,可以将上述效果与DOM元素结合,用极简有DOM元素(不用增加新的元素)实现原来较复杂、或无法实现的效果,如气泡文字、方块修饰、下划线等。
附:文中用到的CSS代码。阅读时请注意,本文未充分考虑浏览器兼容问题。
<style type="text/css"> .dialog{ width:200px; border:1px solid gray; border-radius:8px; font-size:18px; line-height:32px; position:relative; padding-left:10px; } .dialog:before{ content:""; display:block; position:absolute; width:12px; height:12px; border:1px solid gray; border-width:1px 0 0 1px; left:-7px; top:10px; background-color:white; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); } div.border-example1{ width:0; height:0; border-style:solid; border-width:24px; border-color:red blue; } div.border-example2{ width:0; height:0; border-style:solid; border-width:24px 24px 24px 0; border-color:white gray; } div.border-example3{ width:24px; height:24px; background-color:red; } div.border-example4{ width:24px; height:24px; background-color:red; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); } div.border-example5{ width:24px; height:24px; border-style:solid; border-width:1px 0 0 1px; border-color:red; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); } div.border-example6{ width:24px; height:24px; border-radius:12px; background-color:red; } .rect{ line-height:36px; height:36px; background-color:gray; padding:0 20px; position:relative; } .rect:before{ content:""; position:absolute; width:12px; height:12px; top:12px; background-color:blue; left:4px; } .hr{ position:relative; } .hr:after{ content:""; position:absolute; width:auto; left:0; right:0; bottom:0; height:1px; background-color:red; } </style>