currentColor具有不透明度

Question

是否有一种方法可以更改边框的不透明度，该边框设置为从currentColor继承它的颜色？即继承currentColor中的#inner2并将其不透明度设置为0.25。

请搜索纯css解决方案。

例如，类似于以下内容：

＆＃13;

＆＃13;

#outer{
  color: rgba(255,0,0,1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2{
  /* This is where I want to inherit current color */
  /* ... but still set it to 0.25 opacity */
  border-color: rgba(255,0,0,0.25);
}

＆＃13;

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您将currentColor值与inherit混淆，后者是默认。您不要将currentColor用于边框属性，因为它是边框的默认值。您只能将其用于background。

#inner1和#inner2都从最接近父级的颜色设置（红色）继承而且边框默认使用该颜色。

以下解决方案将在100％的时间内工作，无论颜色的来源是什么（内联style属性，外部CSS或远程祖先继承）：

#outer{ color:red; }
#inner1, #inner2{ 
    padding: 2em; 
    margin-top: 1em;  
}
#inner1{ border:5px solid; } 

#inner2{ position:relative; }

#inner2::before{  
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:5px solid;
  opacity:.5;
}

<div id='outer'>
  <div id='inner1'>inner 1</div>
  <div id='inner2'>inner 2</div>
</div>

Answer 2

您可以使用css变量来实现类似的行为：

public ActionResult Create(UserModel usr)
{
    con.Open();
    string query = "Insert into Tbl_User Values(@Usr_Name,@FirstName,@LastName,@Gender,@Phone,@Address,@Email)";
    SqlCommand cmd = new SqlCommand(query, con);
    SqlParameter usrname = cmd.Parameters.AddWithValue("@Usr_Name", usr.Usr_Name);
    if (usr.Usr_Name == null)
    {
        usrname.Value = DBNull.Value;
    }
    SqlParameter fname = cmd.Parameters.AddWithValue("@FirstName", usr.First_Name);
    if (usr.First_Name == null)
    {
        fname.Value = DBNull.Value;
    }
    cmd.Parameters.AddWithValue("@LastName", usr.Last_Name);
    cmd.Parameters.AddWithValue("@Gender", usr.Gender);
    cmd.Parameters.AddWithValue("@Phone", usr.Phone);
    cmd.Parameters.AddWithValue("@Address", usr.Address);
    cmd.Parameters.AddWithValue("@Email", usr.Email);
    cmd.ExecuteNonQuery();

    return RedirectToAction("Index");
}

#outer{
  --border-r: 255;
  --border-g: 0;
  --border-b: 0;
  color: rgba(var(--border-r),var(--border-g),var(--border-b),1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid;
}

#inner2{
  color: rgba(var(--border-r),var(--border-g),var(--border-b),0.25);
}

Answer 3

看看这个：

:root {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
  --color-a: 1;
}

[class*=-color] {
  color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=-background] {
  --background-r: var(--color-r);
  --background-g: var(--color-g);
  --background-b: var(--color-b);
  --background-color-a: var(--color-a);
  background-color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=dark] {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
}

[class*=light] {
  --color-r: 255;
  --color-g: 255;
  --color-b: 255;
}

[class*=primary] {
  --color-r: 200;
  --color-g: 2;
  --color-b: 33;
}

[class*=secondary] {
  --color-r: 102;
  --color-g: 102;
  --color-b: 102;
}

[class*="--alpha-0"], [class*="--alpha-00"] {
  --color-a: 0;
}

[class*="--alpha-10"] {
  --color-a: .1;
}

[class*="--alpha-20"] {
  --color-a: .2;
}

[class*="--alpha-30"] {
  --color-a: .3;
}

[class*="--alpha-40"] {
  --color-a: .4;
}

[class*="--alpha-50"] {
  --color-a: .5;
}

[class*="--alpha-60"] {
  --color-a: .6;
}

[class*="--alpha-70"] {
  --color-a: .7;
}

[class*="--alpha-80"] {
  --color-a: .8;
}

[class*="--alpha-90"] {
  --color-a: .9;
}

[class*="--alpha-100"] {
  --color-a: 1;
}