1. Translucent borders

CSS:

height: 100px; width: 100px; border: 10px solid hsla(0, 0%, 100%, .5); background: white; padding: 10px; background-clip: padding-box; // The default value is content-box, the clipping area of the background imageCopy the code

Effect:

2. Multiple borders

Box – shadow

Note:

  • The behavior of the projection is not exactly consistent with the border, and is not affected by box-sizing.
  • The created border appears on the outer edge of the element and is a ‘fake’ border.
  • Only solid border can be implemented.

CSS:

margin: 20px; height: 100px; width: 100px; background-color: aqua; box-shadow: 0 0 0 10px red, 0 0 0 15px green; // You can add an infinite border with a commaCopy the code

The outline plan

Note:

  • Some only need to generate two layers of borders, with the general border plus outline.
  • The style is flexible and can generate solid and dotted borders.

CSS:

height: 100px;
width: 100px;
background-color: aqua;
border: 10px solid red;
outline: 5px solid green;
Copy the code

Effect:

Extension: Outline implements simple hemming effects

CSS:

height: 100px;
width: 100px;
background-color: aqua;
outline: 2px dashed #fff;outline-offset: -10px; // Offset the contour and draw it around the border.Copy the code

Effect:

3. Background positioning

Background – the position solution

CSS:

height: 100px;
width: 150px;
background: url('./image/log.png') no-repeat right bottom #58a; 
background-position: right 20px bottom 10px; 
Copy the code

Background – origin scheme

Note:

  • Background-position is positioned based on the padding box.
  • Background-origin changes the box model to which background-position is positioned.

CSS:

height: 100px;
width: 150px;
background: url('./image/log.png') no-repeat right bottom #58a;background-origin: content-box; // Change the background-position of the positioning box model. padding-right: 20pxCopy the code

Calc () solution

CSS:

height: 100px;
width: 150px;
background: url('./image/log.png') no-repeat right bottom #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
Copy the code

Effect:

4. Rounded corners inside the border

CSS:

height: 100px;
width: 150px;
background-color: tan;
border-radius: .8rem;
padding: 1em;
outline: .6em solid # 655;
box-shadow: 0 0 0 .5em # 655;
Copy the code

Effect:

5. Striped background

Horizontal stripes

CSS:

height: 100px;
width: 150px;
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
Copy the code

Effect:

Vertical stripes

CSS;

height: 100px;
width: 150px;
background: linear-gradient(to right, #fb3 50%, #58a 50%);
background-size: 30px 100%;
Copy the code

Effect:

Diagonal stripes

CSS:

height: 100px;
width: 150px;
background: repeating-linear-gradient(45deg, #fb3 0 15px, #58a 15px 30px);
Copy the code

Effect:

6. Complex background patterns

The grid

CSS:

height: 100px;
width: 150px;
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
Copy the code

Effect:

Wave point

CSS:

height: 100px;
width: 150px;
background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
Copy the code

Effect:

The board

CSS:

height: 100px;
width: 150px;
background-image: linear-gradient(45deg,
  #bbb 25%, transparent 0,
  transparent 75%, #bbb 0),
                linear-gradient(45deg,
  #bbb 25%, transparent 0,
  transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
Copy the code

Effect:

7. Pseudo-random background

CSS:

height: 100px;
  width: 150px;
  background: hsla(20, 40%, 90%);
  background-image: linear-gradient(90deg, #f63 11px, transparent 0),
  linear-gradient(90deg, #ab4 23px, transparent 0),
  linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%; // The width of the selected numbers are interchangeableCopy the code

Effect:

8. Continuous image borders

CSS:

height: 100px;
width: 150px;
padding: 10px;
box-sizing: border-box;
border: 10px solid transparent;
background: 
  linear-gradient(transparent, transparent) padding-box,
  url('./image/1.jpg') border-box 0 0 /cover; */ background: linear-gradient(transparent, transparent), url('./image/1.jpg'); background-clip: padding-box, border-box; background-size: cover; background-origin: border-box; // Fix the image tiling to the border box areaCopy the code

Effect:

Adaptive ellipses

CSS:

background: #fb3;
width: 200px;
height: 150px;
border-radius: 50% / 50%;
Copy the code

Effect:

Quarter oval:

CSS:

background: #fb3;
width: 150px;
height: 100px;
border-radius: 50% / 100% 100% 0 0;
Copy the code

Effect:

parallelogram

CSS:

.button {
  position: relative;
  width: 250px;
  height: 100px;
}
.button::before{
  content: ' ';
  position: absolute;
  background: #58a;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transform: skew(-45deg);
}
Copy the code

Effect:

11. Diamonds

CSS:

height: 150px;
width: 150px;
background: #58a;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
Copy the code

Effect:

12. Corner cutting effect

CSS:

height: 100px;
width: 150px;
background: #58a; // Provide a rollback mechanism
background: linear-gradient(-45deg, transparent 15px, #58a 0);
Copy the code

Effect:

background: #58a;
height: 100px;
width: 150px;
background: 
  linear-gradient(45deg, transparent 15px, #58a 0) bottom left,
  linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
  linear-gradient(135deg, transparent 15px, #58a 0) top left,
  linear-gradient(-135deg, transparent 15px, #58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
Copy the code

Effect:

background: #58a;
height: 100px;
width: 150px;
background: 
  radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
  radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
  radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
  radial-gradient(circle at top right, transparent 15px, #58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
Copy the code

Effect:

13. Trapezoidal TAB page

CSS:

.nav {
  position: relative;
  height: 50px;
  width: 100px;
  margin: 40px;
  padding: .3em 1em 0;
}
.nav::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  background: #58a;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform: perspective(.5em) rotateX(5deg);
  transform-origin: bottom;
}
Copy the code

Effect:

Continuously updated…