zhangxinxu/quiz

CSS基础测试19期

Opened this issue · 11 comments

zhangxinxu commented

请实现下图所示的圆角渐变边框，颜色是 deepskyblue 和 deeppink，外圆角大小是
10px。

image

原图不显示点击这里

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法进行高亮：

```html
你的代码在这里
```
```css
你的代码在这里
```

本期小测需要提供在线demo，不要参考别人的回答，诚实守信。

本期小测无直播答疑，但是会总结要点。

感谢您的参与！

zer0fire commented

demo

    .radius {
      width: 200px;
      height: 100px;
      position: relative;
      background-color: #fff;
      margin: 40px;
    }
    .radius::after {
      content: '';
      position: absolute;
      width: 220px;
      height: 120px;
      background: linear-gradient(deepskyblue, deeppink);
      border-radius: 10px;
      z-index: -1;
      left: -10px;
      top: -10px;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS19</title>
</head>
<body>
  <div class="radius">
    圆角渐变框
  </div>
</body>
</html>

我记得好像用特别的带圆角的图片 + border-image 是不是也可以做到类似的效果呢？我自己试了下用 linear-gradient 生成貌似是不太靠谱。。。回头可以再试试

ziven27 commented

JSBIN DEMO

想到了下面四种方式：

  1. 白色挡住 成功
  2. border-image 成功
  3. clip 失败
  4. mask-image 失败
  <h3>第一种</h3>
  <div class="box box-1">
    <div class="box-in">圆角渐变边框</div>
  </div>
  <h3>第二种</h3>
  <div class="box box-2">
    <div class="box-in">圆角渐变边框</div>
  </div>
.box{
  display:inline-block;
  border-radius:8px;
}

.box-in{
  padding:1em 3em;
}

/*第一种*/
.box-1{
  padding:8px;
  background:linear-gradient(deepskyblue, deeppink);
}
.box-1 .box-in{
  background-color:#ffffff;
}
/*第二种*/
.box-2{
  overflow:hidden;
}
.box-2 .box-in{
  border:8px solid;
  border-image:linear-gradient(deepskyblue, deeppink) 8;
}
Seasonley commented 
{
  border-radius: 10px;
  background: linear-gradient(white,white) center/calc(100% - 20px) calc(100% - 20px) no-repeat,linear-gradient(deepskyblue,deeppink);
  padding: 10px;
}
liyongleihf2006 commented

jsbin

.gorgeous-box {
  position: relative;
  height: 100px;
  width: 600px;
  padding: 10px;
  overflow: hidden;
  border-radius: 10px;
}

.gorgeous-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border: 10px solid transparent;
  border-image: linear-gradient(deepskyblue, deeppink) 10;
}
<div class="gorgeous-box"></div>
simplefeel commented

JSBIN

.button1{
text-align:center;
line-height:100px;
border:1px solid transparent;
position:relative;
background-clip: padding-box;
background:#fff;

}
.button1:after{
position:absolute;
content:'';
background:linear-gradient(deepskyblue, deeppink);
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
border-radius: 10px;
z-index:-1;
}

.button2{
overflow:hidden;
border-radius:10px;
}
.button2 .button{
text-align:center;
line-height:100px;
border:10px solid;
border-image:linear-gradient(deepskyblue, deeppink) 10;
}

guqianfeng commented

demo

<div class="box">
  圆角渐变框
</div>
* {
  padding: 0;
  margin: 0;
}
body {
  --boxWidth: 200px;
  --boxHeight: calc(var(--boxWidth) / 2);
  --radiusSize: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box {
  position: relative;
  width: var(--boxWidth);
  height: var(--boxHeight);
  text-align: center;
  line-height: var(--boxHeight);
  background-color: #fff;
}
.box:after {
  position: absolute;
  content: "";
  width: calc(var(--boxWidth) + 2 * var(--radiusSize));
  height: calc(var(--boxHeight) + 2 * var(--radiusSize));
  left: calc(-1 * var(--radiusSize));
  top: calc(-1 * var(--radiusSize));
  background-image: linear-gradient(deepskyblue, deeppink);
  border-radius: var(--radiusSize);
  z-index: -1;
}
zy017 commented

demo

<div class="box">
  圆角渐变边框
</div>
.box {
  position: relative;
  width: 300px;
  height: 86px;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}
.box::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 10px solid;
  border-image: linear-gradient(to bottom, deepskyblue, deeppink) 10;
}
sunyongming commented

demo

<div>圆角渐变边框</div>
div{
  width: 280px;
  height: 66px;
  border: 10px solid transparent;
  border-radius: 10px;
  background: 
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(deepskyblue,deeppink) border-box;
  text-align: center;
  line-height: 66px;
}
  • 👍2
xxf1996 commented

demo

<div class="demo">圆角渐变边框</div>
.demo {
  position: relative;
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
.demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, deepskyblue, deeppink);
  z-index: -1;
}
.demo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(10px 10px 10px 10px);
  background-color: #fff;
  z-index: -1;
}
livetune commented

裁剪一下
Demo

<div class="container">圆角渐变框</div>
.container {
    height: 100px;
    width: 400px;
    line-height: 100px;
    border: 20px solid #eee;
    text-align: center;
    border-image: linear-gradient(deepskyblue, deeppink) 10;
    clip-path: inset(0 round 20px);
}
zhangxinxu commented

两个方法：

  1. 外部父元素border-radius + overflow: hidden，子元素border-image;
  2. 子元素border-image实现，使用clip-path检测。