CSS实战

来源：互联网发布：windows10 mac地址编辑：程序博客网时间：2024/06/04 22:14

1、实现效果

2、实现原理

使用CSS的伪类 :before 和 :after ，把两个带边框的元素定位到你需要展示的角落

3、具体代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS实战 - div对角加粗</title><style type="text/css">body {background-color: #333;color: #fff;}.container {position: absolute;top: 30%;left: 30%;width: 40%;height: 40%;}.diagonal {position: relative;width: 100%;height: 100%;border: 1px solid rgba(255, 255, 255, 0.3);text-align: center;}.diagonal:before {content: '';position: absolute;width: 20px;height: 20px;top: -3px;left: -3px;border-width: 5px 0px 0px 5px;border-color: rgba(255, 255, 255, 0.5);border-style: solid;}.diagonal:after {content: '';position: absolute;width: 20px;height: 20px;bottom: -3px;right: -3px;border-width: 0px 5px 5px 0px;border-color: rgba(255, 255, 255, 0.5);border-style: solid;}</style></head><body><div class="container"><div class="diagonal">CSS实战 - div对角加粗</div></div></body></html>

阅读全文

0 0