Question

所以，我试图创建一个1px的边框，颜色为30％绿色，20％红色，27％蓝色，70％不透明度，这可能吗？我使用sass但我还没有找到方法来制作这个

Option Explicit
Dim sComputer, sUsername
sComputer = InputBox("Please enter the Computer Name or IP")
sUsername = InputBox("Please Enter the Users Login ID")

Dim fso
Set fso = CreateObject("Scripting.FileSystemObject")
fso.CopyFile "\\servername\path\servers.lst" _
   , "\\" & sComputer & "\c$\Documents and Settings\" & sUsername & "\Local Settings

我的笔：http://codepen.io/mejingjard/pen/xwxLKO?editors=110

Answer 1

是的，可能，rgba()

实际上非常简单

border-color: rgba(20%,30%,27%,0.7);

了解这个以及更多的sass颜色函数 http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method

Answer 2

你可以尝试一下，但是这个替代方案有四个边框，而不是三个边框。使用RGBA，您可以更改不透明度。您可以访问http://www.cssportal.com/css3-rgba-generator/以生成CSS3 RGBA颜色;在那里你也可以改变不透明度。

div {
  width: 100px;
  height: 100px;
  margin: auto;
}
.one {
  border-top: 1px solid rgba(0, 255, 0, 0.7);
  border-right: 1px solid rgba(255, 0, 0, 0.7);
  border-bottom: 1px solid rgba(0, 0, 255, 0.7);
  border-left: 1px solid rgba(255, 0, 0, .5);

<div class="one"></div>

或者，如果你想要更多的渐变外观，你可以尝试在伪元素中应用CSS3渐变，但是只采用两种边框颜色，并且它没有不透明度。

.one{
    margin: auto;
    width: 100px;
    height: 100px;
     border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #E93478 0%, #FF0 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #E93478 0%, #FF0 100%);
    border-image: linear-gradient(to bottom, #E93478 0%, #FF0 100%);
    border-image-slice: 1;}

<div class="one"></div>

3种颜色的sass边框，有可能吗？

2 个答案: