CSS基础测试19期 #66

zhangxinxu · 2020-03-13T08:56:26Z

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

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

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

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

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

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

感谢您的参与！

zer0fire · 2020-03-13T11:54:58Z

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 · 2020-03-14T06:11:13Z

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 · 2020-03-14T11:06:40Z

{
  border-radius: 10px;
  background: linear-gradient(white,white) center/calc(100% - 20px) calc(100% - 20px) no-repeat,linear-gradient(deepskyblue,deeppink);
  padding: 10px;
}

liyongleihf2006 · 2020-03-14T13:33:02Z

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 · 2020-03-15T04:48:02Z

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 · 2020-03-16T05:18:31Z

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 · 2020-03-16T12:55:19Z

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 · 2020-03-17T07:31:02Z

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 · 2020-03-21T07:51:10Z

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 · 2020-03-21T16:25:24Z

裁剪一下
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 · 2020-04-01T09:39:21Z

两个方法：

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS基础测试19期 #66

CSS基础测试19期 #66

zhangxinxu commented Mar 13, 2020 •

edited

Loading

zer0fire commented Mar 13, 2020 •

edited

Loading

ziven27 commented Mar 14, 2020

Seasonley commented Mar 14, 2020

liyongleihf2006 commented Mar 14, 2020

simplefeel commented Mar 15, 2020

guqianfeng commented Mar 16, 2020

zy017 commented Mar 16, 2020

sunyongming commented Mar 17, 2020 •

edited

Loading

xxf1996 commented Mar 21, 2020

livetune commented Mar 21, 2020

zhangxinxu commented Apr 1, 2020

CSS基础测试19期 #66

CSS基础测试19期 #66

Comments

zhangxinxu commented Mar 13, 2020 • edited Loading

zer0fire commented Mar 13, 2020 • edited Loading

ziven27 commented Mar 14, 2020

Seasonley commented Mar 14, 2020

liyongleihf2006 commented Mar 14, 2020

simplefeel commented Mar 15, 2020

guqianfeng commented Mar 16, 2020

zy017 commented Mar 16, 2020

sunyongming commented Mar 17, 2020 • edited Loading

xxf1996 commented Mar 21, 2020

livetune commented Mar 21, 2020

zhangxinxu commented Apr 1, 2020

zhangxinxu commented Mar 13, 2020 •

edited

Loading

zer0fire commented Mar 13, 2020 •

edited

Loading

sunyongming commented Mar 17, 2020 •

edited

Loading