生活随笔
收集整理的这篇文章主要介绍了
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实现四角边框的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
