如何在图像上添加渐变边框（对角线边框） [英] How to add a gradient border above image (diagonal border)

问题描述

但在图片上方，这是我的第一个attemp，但它不工作

http://jsfiddle.net/wo8gbhx3/17/

这是我的标记（现在）

HTML

 < div class =testing> 
< ul> 
< li class =selected unavailable> 
< a href =＃> 
< img src =http://placehold.it/25x25/> 
< / a> 
< / li> 
< / ul> 
< / div> 
  

CSS

  .testing ul {
 list-style：none; 
} 
 .testing ul li {
 width：25px; 
 height：25px; 
 position：relative; 
} 
 .testing ul li img {
 width：100％; 
 height：100％; 
} 
 .unavailable：before {
 position：absolute; 
 border：2px纯绿色; / *仅用于测试* / 
 background：repeating-linear-gradient（150deg，#FFF，#FFF 16px，＃000 18px）; 
} 
  

解决方案

/ p>

  .testing ul {list-style：none;}测试ul li {width：250px; height：250px;}。testing ul li img {width：100％;高度：100％; display：block;}。unavailable {position：relative;}不可用a：after {content：''; width：100％;高度：100％; top：0; left：0; position：absolute; border：2px solid green; / *仅用于测试* / background：repeated-linear-gradient（150deg，transparent，transparent 16px，＃000 18px）; z-index：2;}  

 < div class = testing> < ul> < li class =selected unavailable> < a href =＃> < img src =http://placehold.it/200x200/> < / a> < / li> < / ul>< / div>  

Hello to all I need to something like this

But above an image, here is my first attemp but it doesn't work

http://jsfiddle.net/wo8gbhx3/17/

And this is my markup (now)

HTML

<div class="testing">
    <ul>
        <li class="selected unavailable">
            <a href="#">
                <img src="http://placehold.it/25x25"/>
            </a>
        </li>
    </ul>
</div>

CSS

.testing ul {
    list-style: none;
}
.testing ul li {
    width: 25px;
    height: 25px;
    position: relative;
}
.testing ul li img {
    width: 100%;
    height: 100%;
}
.unavailable:before {
    position: absolute;
    border: 2px solid green; /* Just for testing */
    background:repeating-linear-gradient( 150deg, #FFF, #FFF 16px, #000 18px);
}

解决方案

You need something like this

.testing ul {
  list-style: none;
}
.testing ul li {
  width: 250px;
  height: 250px;
}
.testing ul li img {
  width: 100%;
  height: 100%;
  display: block;
}
.unavailable {
  position: relative;
}
.unavailable a:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border: 2px solid green;
  /* Just for testing */
  background: repeating-linear-gradient(150deg, transparent, transparent 16px, #000 18px);
  z-index: 2;
}

<div class="testing">
  <ul>
    <li class="selected unavailable">
      <a href="#">
        <img src="http://placehold.it/200x200" />
      </a>
    </li>
  </ul>
</div>

这篇关于如何在图像上添加渐变边框（对角线边框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！