Question

我只需要一个正方形的水平线，我试过这种方式，但在我的情况下，我只需要顶部的水平线，

＆＃13;

div {
  height: 100px;
  width: 200px;
  border: 1px solid;
  background-color: gray;
  background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
  box-shadow: inset 0px 0px 3px red;
}

＆＃13;

<div></div>

＆＃13;

下面是我的工作小提琴 http://jsfiddle.net/uXbn6/4322/

Answer 1

div {
    height: 100px;
    width: 200px;
    border: 1px solid;
    background-color: gray;
    background-image: 
        linear-gradient(to bottom, black, black), 
        linear-gradient(to right, red, transparent), 
        linear-gradient(to right, black, black),   
        linear-gradient(to bottom, red, transparent);
    background-repeat: no-repeat;
    background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
    background-position: 0px 10px, 0px 11px;
    box-shadow: inset 0px 0px 3px red;
 }

Fiddle

只有正方形的垂直线

1 个答案: