这是效果图

要实现这个圆角描边,就得用到border-radius和border-image,但是有一个问题就是他们不兼容,所以要解决这个问题,就得看下面的代码了
<template>
<div class="about">
<div class="laoppwq">
<div class="djiiiwww">
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.djiiiwww{
width: 100%;
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, #25262A 0%, #2F3035 100%);
}
.laoppwq {
width: 402px;
height: 120px;
box-sizing: border-box;
background-image: linear-gradient(128deg, rgba(255, 255, 255, 0) 73%, #FFFFFF 92%);
border-radius: 10px;
margin: 10px auto 0;
padding: 1px;
}
</style>
完美解决


文章讲述了如何在CSS中使用border-radius和border-image创建圆角描边效果,同时处理不同浏览器的兼容性问题,通过提供一个带有样例代码的解决方案来展示实现过程。

1834

被折叠的 条评论
为什么被折叠?



