生活随笔
收集整理的這篇文章主要介紹了
css实现四角边框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如下效果
代碼：
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta http
-equiv
="X-UA-Compatible" content
="IE=edge"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>css實現四角邊框
</title
><style
>* {margin
: 0;padding
: 0;box
-sizing
: border
-box
;}html
,body
{background
-color
: #
333;height
: 100%;color
: green
;display
: flex
;justify
-content
: center
;align
-items
: center
;}:root
{--borderColor
: #
03A9F3
;}div
{cursor
: pointer
;text
-align
: center
;padding
: 10px
;width
: 200px
;height
: 100px
;background
: linear
-gradient(to left
, var(--borderColor
), var(--borderColor
)) left top no
-repeat
, linear
-gradient(to bottom
, var(--borderColor
), var(--borderColor
)) left top no
-repeat
, linear
-gradient(to left
, var(--borderColor
), var(--borderColor
)) right top no
-repeat
, linear
-gradient(to bottom
, var(--borderColor
), var(--borderColor
)) right top no
-repeat
, linear
-gradient(to left
, var(--borderColor
), var(--borderColor
)) left bottom no
-repeat
, linear
-gradient(to bottom
, var(--borderColor
), var(--borderColor
)) left bottom no
-repeat
, linear
-gradient(to left
, var(--borderColor
), var(--borderColor
)) right bottom no
-repeat
, linear
-gradient(to left
, var(--borderColor
), var(--borderColor
)) right bottom no
-repeat
;background
-size
: 2px
20px
, 20px
2px
, 2px
20px
, 20px
2px
;transition
: all
.4s ease
;border
: 1px solid transparent
;}div
:hover
{border
: 1px solid
var(--borderColor
)}</style
>
</head
><body
><div
>我可是四角邊框哦
</div
>
</body
></html
>
總結
以上是生活随笔為你收集整理的css实现四角边框的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
