CSS实现对角边框样式

最新推荐文章于 2025-06-25 11:44:23 发布

原创最新推荐文章于 2025-06-25 11:44:23 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端 #开发语言 #ecmascript

本文介绍了如何使用CSS通过线性渐变和伪类来实现对角边框的样式，包括左下到右上以及其它方向的对角边框。提供了详细的方法和示例代码，适用于前端开发者提升页面设计效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现对角框，边角加个边框、四角框

一：线性渐变方式：

鼠标悬停触发显示
:hover {
              background: linear-gradient(to left, #043add, #043add) left top no-repeat,
                linear-gradient(to bottom, #043add, #043add) left top no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat;
              /*设置大小*/
              background-size: 0.12rem 1rem, 1rem 0.12rem;
            }

二：伪类

默认是透明opacity: 0; 鼠标悬停触发显示
增加css3过渡效果，显示更平滑


:before {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 20px;
              height: 20px;
              content: "";
              border-left: 2px solid #043add;
              border-bottom: 2px solid #043add;
              transition: all 0.6s ease;
              opacity: 0;
            }

            :after {
              position: absolute;
              top: 0;
              right: 0;
              width: 20px;
              height: 20px;
              content: "";
              border-right: 2px solid #043add;
              border-top: 2px solid #043add;
              transition: all 0.6s ease;
              opacity: 0;
            }

            :hover:before,
            :hover:after {
              opacity: 1;
            }