边框显示"/>
css实现盒子的四个角高亮边框显示
效果：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}html,body {line-height: 1.15;text-align: center;}.container {position: relative;width: 300px;height: 180px;line-height: 180px;margin: 10px;background-color: ;border: 1px solid rgba(25, 186, 139, 0.17);background-color: yellow;}.container::before {position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02A6B5;border-top: 2px solid #02A6B5;content: "";}.container::after {position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02A6B5;border-top: 2px solid #02A6B5;content: "";}#toral{position: absolute;bottom: 0;left: 0;width: 100%;}#toral::before{position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02A6B5;border-bottom: 2px solid #02A6B5;content: "";}#toral::after{position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02A6B5;border-bottom: 2px solid #02A6B5;content: "";}</style></head><body><div class="container"><div id="toral">华诚荣邦</div></div></body>
</html>
更多推荐
css实现盒子的四个角高亮边框显示
发布评论