如何将图像边框定为图像的特定高度和宽度？ HTML / CSS

问题描述

我在下面附加了一张图像，我要为其编写css，该CSS将为图像的左侧和底部提供边框。我尝试过，但是我的代码使用了完整边框

这是我想要的必需输出。

[HttpPost]
    public async Task<IActionResult> Create(CreateEditChildviewmodel model)
    {
        if (ModelState.IsValid)
        {
            string webrootPath = _hostingEnvironment.WebrootPath;
            var files = HttpContext.Request.Form.Files;

            var child = new Childs()
            {
                FirstName = model.FirstName,LastName = model.LastName,//...................
            };
            _db.Childs.Add(child);
            await _db.SaveChangesAsync();

            if (files.Count() > 0)
            {
                var uploads = Path.Combine(webrootPath,"images");
                var extension = Path.GetExtension(files[0].FileName);
                using (var filesstream = new FileStream(Path.Combine(uploads,child.Id + extension),FileMode.Create))
                {
                    files[0].copyTo(filesstream);
                }
                child.Picture = @"\images\" + child.Id + extension;
            }

            await _db.SaveChangesAsync();
            return Json("Index");
        }

        CreateEditChildviewmodel modelVM = new CreateEditChildviewmodel()
        {
            FirstName = model.FirstName,//....................
        };
        return Json(modelVM);
    }

img{
    border-top: 15px solid #faa633;
    border-right: 15px solid #faa633;
    border-left: 15px solid #faa633;
}

解决方法

保持边框透明，并应用特定大小的渐变：

Label {
    text: extraController.root.name // property root - calls getRoot() in BaseController
}

img {
  border: 15px solid transparent;
  background: 
    linear-gradient(#faa633,#faa633) 
    bottom left/ /* position */
    50% 40% /* width height */
    border-box no-repeat;
}

,

如果您只想在图像的两侧边框，我建议使用阴影框。