css实现圆角+渐变+半透边框

效果图

div结构

<div class="box"></div>

css分解

1. 基础结构

   .box{
   	position:relative;
       width:200px;
       height:200px;
       box-sizing:border-box;
       padding:1px; //1px内边距作为1px边框使用
   }
   

2. 加入大背景（红色渐变边框）

   .box{
   	background-image: linear-gradient(146deg, rgba(255, 252, 252, 0.60) 0%, rgba(255, 235, 235, 0.77) 100%);
   }
   

• 此时的效果图

3. 使用伪元素加入内容背景

   .warning::before {
       content: '';
       position: absolute;
       top: 1px;
       right: 1px;
       bottom: 1px;
       left: 1px;
       background-color: rgba(255, 252, 252, 80%);
       border-radius: 8px;
   }
   

• 覆盖上去后的效果图

如果内容不需要透明，将伪元素背景换成纯色即可

方案二：图片边框

图片

喊ui设计师交出一张边框的切图

css

.box {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 8px;
	/* 下面这个是内容的渐变背景 */
    background-image: linear-gradient(146deg, rgba(255, 252, 252, 0.60) 0%, rgba(255, 235, 235, 0.77) 100%);
}

.box::before {
    content: '';
    position: absolute;
    border: 15px solid transparent; /* 根据图片大小调整边框粗细 */
    /* 引入图片 并设置拉伸 */
    border-image: url('./border-warning.png') 50 stretch;
    /* 100%布局 */
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: inherit;
}