CSS實現對角邊框樣式

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;
            }

　　

 

左下——右上對角邊框，也可以左上——右下對角、四個角。

自己增改代碼。

不懂可以留言！

 

效果圖：