This is the 8th day of my participation in Gwen Challenge

The CSS border

Translucent border

Rgba,halc to achieve translucency, set the object to the border hSLA () function using hue, saturation, brightness, transparency to define the color. HSLA is hue, saturation, brightness, transparency. The (CSS3) RGBA () function uses A superposition of red (R), green (G), blue (B), and transparency (A) to generate various colors. RGBA is Red, Green, Blue, Transparent (CSS3)

     /* Translucent border */
     .tratnslucentborder{
         width: 300px;
         height: 200px;
         border:10px solid rgba(155.86.97.0.3); // Semi-transparent borderbackground-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }
Copy the code

Multiple frames

Outline Solutions

An outline is a line drawn around an element, around the edge of the border, to highlight the element. Outline attribute Sets all outline attributes in a declaration. (CSS2) applies to two layers of borders, the style can be set to a variety of styles

     /* Outline solutions */
     .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;
     }
Copy the code

Box-shaow solution

Box-shadow supports comma-separated syntax and can create multiple solid borders (CSS3)

	Multiple borders | box - / * * / shadow solutions
     .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;
     }
Copy the code

Rounded edges inside the border

The outline will not change as the rounded corner changes. The box-shadow will change as the rounded corner changes

  .borderInnerCircle{
        width: 60%;
        height: 60%;
        background-color: blue;
        background-image: url('./36.png');
        background-repeat: no-repeat;
        background-position:  right 20px bottom 10px;
        border-radius:.8em;
        padding: 1em;
        box-shadow: 0 0 0 .6em # 655;
        /* outline: .6em solid #655; Does not change with rounded corners */
    }
Copy the code

The CSS background

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; / /} at the lower rightCopy the code

Background-origin extended syntax scheme

The background-origin property specifies that the background-position property should be relative. If the background image background-attachment is “fixed”, this property has no effect

    .backgroundorgin{
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid # 655;
        padding: 10px;
        background: url("./36.png") left 17pxbottom; / / lower leftbackground-color: blue;
        background-repeat: no-repeat;
        background-origin: content-box; / / relative tocontent
    }
Copy the code

Striped background

Horizontal without progressive fringe

The linear-gradient() function is used to create an “image” of a linear gradient. To create a linear gradient, you need to set the gradient effect for a starting point and a direction (specified as an Angle). You also have to define the end color. Stop colors are the transitions you want Gecko to smooth, and you must specify at least two, although you can specify more colors to create more complex gradients. (css3)

   .tiaowen{
        width: 60%;
        height: 60%;
        background: linear-gradient(# 788 50%,red 50%);
        /* background-size: 100% 20px; * /
     }
Copy the code

Vertical stripes

Specify direction to right, or 90deg

    /* Vertical stripes */
    .verticalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(to right,# 788 15px,red 15px);
        background-size: 30px 100%;
    }
Copy the code

The diagonal stripes

Specify an Angle of 45deg, or other angles

    .diagonalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(45deg.# 788 25%,red 0,red 50%.# 788 0.# 788 75%,red 0);
        background-size: 30px 30px;
    }

Copy the code

Better diagonal stripes

    .betterDiagonalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(45deg.# 788 ,red 30px.# 788 30px,red 60px.# 788 60px.# 788 120px,red 120px.# 788 150px);
        background-size: 30px 30px;
    }
Copy the code

Flexible same color stripe

The repeating-Linear-gradient () function is used to create a repeated linear gradient “image”

    .flexibleStripes {
        width: 60%;
        height: 60%;
        background: #58a;
		background-image: repeating-linear-gradient(30deg.hsla(0.0%.100%.1),
		hsla(0.0%.100%.1) 15px,
		transparent 0, transparent 30px);    
    }
Copy the code

The code download🌏

Welcome to follow the author Wu Ling 🥇

Personal blog | making – the wuling

“100 JS small knowledge points” series (1) quick learning ⛹🏻♂️

“100 JS small knowledge points” series (2) quick learning ⛹🏻♂️

Simple implementation of vUE several processes