正方形中的水平和垂直线

Question

下面是我正在尝试的图像，我设法使用CSS获得了一个正方形，但我正在尝试在正方形中使用水平和垂直线。

.hub{
   width: 119px;
   height: 101px;
   background: #b5adad;
}

<div class="hub"></div>

Answer 1

有很多方法可以做到这一点，其中一种方法是使用如下的渐变:( 有问题的图像实际上是一个矩形。）

方法非常简单 - 我们使用2个线性渐变来创建两条细的纯色线，然后定位图像以满足我们的需求。即使它只创建纯色，也会使用线性渐变，因为它比背景颜色更容易控制图像的大小和位置。

＆＃13;

＆＃13;

I have a web page called Default.aspx and a textbox called textBox1

In the Default.aspx.cs, I can set the text by typing:

TextBox1.text = "change text";
Now I have created another class. How do I call textBox1 in this class? so I want to change the text for textBox1 in this class.

So far i tried like this it is working fine in Mymethod but it is not working in Myclass.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Net.Sockets;
using System.Net;
using System.Drawing; 
 using System.Threading;

 namespace WebApplication1
 {
 public partial class Default : System.Web.UI.Page
 {

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void submitEventMethod2(object sender, EventArgs e)
    {
        this.Mymethod();
    }
    public void mymethod1()
    {
      Myclass myClass=new Myclass ();
      myClass.mymethod2(TextBox1);

    }
    class Myclass
    {
     public void mymethod2(TextBox textBox)
     {
       textBox.Text = "some text";
     }
    }
}
}

＆＃13;

div {
  height: 100px;
  width: 200px;
  border: 1px solid red;
  background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
  background-position: 20px 0px, 0px 10px;
}

＆＃13;

＆＃13;

＆＃13;

我们还可以创建一个具有淡出或阴影效果的输出，如下图所示：

＆＃13;

＆＃13;

<div></div>

＆＃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;

＆＃13;

＆＃13;

Answer 2

另一种方法是使用:before和:after伪元素：

.hub{
   width: 119px;
   height: 101px;
   background: #b5adad;
  position: relative;
  padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
  content: " ";
  background: black;
  display: block;
  position: absolute;
}
.hub:after {
  width: 1px;
  height: 100%;
  left: 15px;
  top: 0;
}
.hub:before {
  width: 100%;
  height: 1px;
  top: 15px;
  left: 0;
}

<div class="hub">Lorem ipsum dolor amet</div>