css background and border

Translucent border

rgba, halc to achieve translucency, set the object as the border
hsla() function uses hue, saturation, brightness, and transparency to define the color. HSLA stands for hue, saturation, brightness, and transparency. (css3) The
rgba() function uses the superposition of red®, green (G), blue (B), and transparency (A) to generate various colors. RGBA means red, green, blue, transparency (css3)

     /* 半透明边框 */
     .tratnslucentborder{
    
    
         width: 300px;
         height: 200px;A
         border:10px solid rgba(155, 86, 97, 0.3);//半透明边框
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

Multiple border

outline solution

The outline is a line drawn around the element, located at the periphery of the border edge, and can play a role in highlighting the element.
The outline shorthand property sets all outline properties in one statement. (css2)
Suitable for two-layer border, the style can be set to various styles

     /* outline解决方案 */
     .outlinetwoline{
    
    
        width: 300px;
         height: 200px;
         border:10px solid red;
         outline:5px solid black;
         border-radius: 12px;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

box-shaow solution

box-shadow supports comma-separated syntax and can create multiple solid borders (css3)

	/* 多重边框|box-shadow解决方案 */
     .multipleborder{
    
    
         width: 300px;
         height: 200px;
         border:10px solid red;
         box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

Flexible background positioning

Extended syntax scheme for background-position

The background-position property sets the starting position of the background image. (css1)

    .backgroundposition{
    
    
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        background-image: url('./36.png');
        background-repeat: no-repeat;
        background-position:  right 20px bottom 10px;//右下
    }

Background-origin's extended syntax scheme

The background-Origin attribute specifies that the background-position attribute should be a relative position.
If the background image background-attachment is "fixed", this attribute has no effect

    .backgroundorgin{
    
    
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        padding: 10px;
        background: url("./36.png") left 17px bottom;//左下
        background-color: blue;
        background-repeat: no-repeat;
        background-origin: content-box;//相对于content
    }

Code download

thank

If you feel helpful to your study, please share it with those who need it, or like to encourage it, thank you for your support, and
I will continue to update it. . .