如何使用CSS创建半透明线性渐变背景和边框？

huangapple
go评论144阅读模式
英文:

How to create semi transparent linear gradient background and border using css?

问题

以下是您要翻译的内容：

"I am looking to achieve design similar to shown below:

如何使用CSS创建半透明线性渐变背景和边框？

It has a rounded border (ie., using border-radius), which is has gradient colour from left to right, which is as well semi transparent.

It also has background, which too has semi transparent background gradient.

I tried below ways:

https://stackoverflow.com/questions/28252119/creating-semi-transparent-borders

https://stackoverflow.com/questions/32511103/css-linear-gradient-with-semi-transparent-borders

https://stackoverflow.com/questions/51868069/button-gradient-borders-with-transparent-background

JS Fiddle with code that I have tried so far:

https://jsfiddle.net/xobcr0h7/4/


body {
background:black;
--border: 5px;
}

div.button {
display: flex;
justify-content: center;
align-items: centers;
width: 120px;
height: 50px;
border-radius: 30px;

/try 1/

/background-color: rgba(255, 255, 255, 0.25);
border: 2px solid transparent;
background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));/

/*try 1*/

/*try 2*/

/border: var(--border) solid transparent;
background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 1)), linear-gradient(to bottom, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2)) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
background-clip: content-box, border-box;
margin: 10px auto;
mix-blend-mode: multiply;/

/*try 2*/

/*try 3*/
 background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, red, blue) border-box;
border: 4px solid transparent;
/*try 3*/

}

Sign Up

But they all have solid colors or without border radius. I am trying to achieve something that has both with semitransparent background and border."

英文:

I am looking to achieve design similar to shown below:

如何使用CSS创建半透明线性渐变背景和边框？

It has a rounded border (ie., using border-radius), which is has gradient colour from left to right, which is as well semi transparent.

It also has background, which too has semi transparent background gradient.

I tried below ways:

https://stackoverflow.com/questions/28252119/creating-semi-transparent-borders

https://stackoverflow.com/questions/32511103/css-linear-gradient-with-semi-transparent-borders

https://stackoverflow.com/questions/51868069/button-gradient-borders-with-transparent-background

JS Fiddle with code that I have tried so far:

https://jsfiddle.net/xobcr0h7/4/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background:black;
  --border: 5px;
}

div.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  
  /*try 1*/
  
  /*background-color: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));*/
    
    /*try 1*/
    
    /*try 2*/
   
   /*border: var(--border) solid transparent;
    background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 1)), linear-gradient(to bottom, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2)) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
    background-clip: content-box, border-box;
    margin: 10px auto;
    mix-blend-mode: multiply;*/
    
    /*try 2*/
    
    /*try 3*/
     background: linear-gradient(white, white) padding-box,
        linear-gradient(to right, red, blue) border-box;
    border: 4px solid transparent;
    /*try 3*/
    
}

<!-- language: lang-html -->

&lt;div class=&quot;button&quot;&gt;Sign Up&lt;/div&gt;

<!-- end snippet -->

But they all have solid colors or without border radius. I am trying to achieve something that has both with semitransparent background and border.

答案1

得分: 2

我将使用我的先前回答来创建渐变边框，其余部分应该很容易。

button {
  --b: 5px;  /* 边框厚度 */
  --r: 20px; /* 半径 */
  font-size: 25px;
  border: none;
  padding: 10px 20px;
  position: relative;
  background: rgb(255 255 255/50%); /* 带透明度的背景颜色 */
  border-radius: var(--r);
}
button::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--b));
  padding: var(--b);
  border-radius: calc(var(--b) + var(--r));
  background: linear-gradient(90deg,red,green); /* 渐变边框 */
  opacity: .5; /* 边框的透明度 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  background: linear-gradient(90deg,#000,#ccc);
}

<button>按钮</button>
英文:

I will use my previous answer to create the gradient border and the remaining should be easy

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

button {
  --b: 5px;  /* border thickness */
  --r: 20px; /* radius */
  font-size: 25px;
  border: none;
  padding: 10px 20px;
  position: relative;
  background: rgb(255 255 255/50%); /* background color with alpha */
  border-radius: var(--r);
}
button::before {
  content:&quot;&quot;;
  position: absolute;
  inset: calc(-1*var(--b));
  padding: var(--b);
  border-radius: calc(var(--b) + var(--r));
  background: linear-gradient(90deg,red,green); /* gradient border */
  opacity: .5; /* alpha for border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  background: linear-gradient(90deg,#000,#ccc);
}

<!-- language: lang-html -->

&lt;button&gt;A button&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 0

最简单的方法是使用带有 alpha 值的颜色，例如 rgba、hsla 或带有 4 或 8 个数字的 hex。Alpha 设置颜色的透明度：

div {
  background-color: rgba(255, 255, 255, 0.1);
  border: 5px solid rgba(255, 255, 255, 0.12);
}

<div>SING UP</div>
英文:

The easiest way is to use a color with an alpha value such as rgba, hsla or hex with 4 or 8 digits. The alpha sets a transparency to a color:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  background-color: rgba(255, 255, 255, 0.1);
  border: 5px solid rgba(255, 255, 255, 0.12);
}


/* for demonstration purpose only */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(315deg, black 40%, pink);
}

div {
  width: 50vw;
  height: 50vh;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2em;
  font-weight: 900;
}

<!-- language: lang-html -->

&lt;div&gt;SING UP&lt;/div&gt;

<!-- end snippet -->

答案3

得分: -1

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
  <body>
    <button>SIGN UP</button>
  </body>
</html>

CSS:

body {
  background: linear-gradient(to right, purple, darkgrey);
  text-align: center;
}

button {
  font-size: 50px;
  margin-top: 50%;
  padding: 30px 120px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
英文:

HTML:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;button&gt;SIGN UP&lt;/button&gt;
&lt;/body&gt;

&lt;/html&gt;

CSS:

body {
  background: linear-gradient(to right, purple, darkgrey);
  text-align: center;
}

button {
  font-size: 50px;
  margin-top: 50%;
  padding: 30px 120px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

huangapple
  • 本文由 发表于 2023年6月5日 19:06:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76405818.html
  • css
  • gradient
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定