CSS基础测试19期 - Githubissues

zhangxinxu commented 4 years ago

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

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

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

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

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

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

感谢您的参与！

zer0fire commented 4 years ago

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 4 years ago

JSBIN DEMO

想到了下面四种方式：

白色挡住 成功
border-image 成功
clip 失败
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 4 years ago

{
  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 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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;
}

xxf1996 commented 4 years ago

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 4 years ago

裁剪一下 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 4 years ago

两个方法：

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

zhangxinxu / quiz

CSS基础测试19期 #66