时间:2023-03-06来源:系统城装机大师作者:佚名
“border-image”属性是创建渐变边框的正确方法。
HTML
1 2 3 |
< div class = "gradient-border -using-border-image" > </ div > |
该渐变边框使用了 gradient-border 和 -using-border-image 两个CSS属性。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.gradient-border { --color -1: rebeccapurple; --color -2: crimson; --border-radius: 1.25 rem; -- border-width : 0.5 rem; width : 100% ; padding : 2 rem; position : relative ; border-radius: var(--border-radius); } .gradient-border * + * { margin-top : 0.5 rem; } .gradient-border.-using-border-image { border-width : var(--border-width); border-style : solid ; -o-border-image: linear-gradient( 135 deg, var(--color -1 ), var(--color -2 )) 1 stretch; border-image: linear-gradient( 135 deg, var(--color -1 ), var(--color -2 )) 1 stretch; } |
我们可以使用clip-path属性来画圆角,但内角保持方形。
HTML
1 2 3 |
< div class = "gradient-border -using-border-image -using-clip-path" > </ div > |
该渐变边框除了使用了 gradient-border 和 -using-border-image 外,还用了一个 -using-clip-path 的CSS属性。
CSS
1 2 3 4 |
.gradient-border.-using-clip-path { -webkit-clip-path: inset ( 0px round var(--border-radius)); clip-path: inset ( 0px round var(--border-radius)); } |
一个既有渐变又有半径的漂亮边框需要多一点CSS(和一个伪元素)。
HTML
1 2 3 |
< div class = "gradient-border -using-pseudo-element" > </ div > |
该渐变圆角边框使用了伪元素(pseudo-element)来实现。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.gradient-border.-using-pseudo-element { position : relative ; padding : calc( 2 rem + var(--border-width)); border-radius: var(--border-radius); background-image : linear-gradient( 135 deg, var(--color -1 ), var(--color -2 )); } .gradient-border.-using-pseudo-element * { position : relative ; z-index : 1 ; } .gradient-border.-using-pseudo-element::after { content : "" ; display : block ; position : absolute ; top : var(--border-width); right : var(--border-width); bottom : var(--border-width); left : var(--border-width); border-radius: calc(var(--border-radius) - var(--border-width)); background-color : var(--background); box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , 0.4 ); } |
到此这篇关于纯CSS实现具有渐变和圆角的彩色边框的文章就介绍到这了
2023-03-06
CSS实现多层嵌套列表自动编号的示例代码2023-03-06
css圆角三角形的实现代码2023-03-06
CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)当我们想在图片上面放置一些文字内容时,发现不管怎么放置,要么就是图片影响到文字的观感,要么就是文字挡住图片的细节,那么怎么可以既看到图片的细节又可以看到对图片的文字描述呢?下面一起来看看吧。...
2023-03-06