This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

CSS3 has added some attributes to the border, let’s take a look!

1. Box-shadow Is used to set the box shadow

Format: box-shadow: Shadow type X-axis offset Y-axis offset Shadow Edge Blur Shadow Extension radius Shadow color

  • Shadow type: includes inner shadow and outer shadow. The default is outer shadow. You can set inset to indicate inner shadow
  • X and Y offsets: mandatory to indicate the position of the shadow. Values can be positive or negative
  • Shadow Edge Blur: The default value is 0, which means no blur. The blur extends from the edge of the shadow and can only be positive. The greater the blur, the greater the area of the blur and the larger the overall shadow area.
  • Shadow extension radius: the size of the shadow. The default value is 0 (no shadow expansion). You can set positive or negative values.
  • Shadow color: Default is CurrentColor
<head>
  <style>      
    div{
      width: 200px;
      height: 80px;
      background-color: pink;
      box-shadow:2px 5px 5px 0 deeppink; 
    }
  </style>
</head>
<body>
  <div></div>
</body>
Copy the code

Here, set the blur radius to 5px. If set to 0, there will be no blur.

The four properties that are commonly set are: X-axis offset, Y-axis offset, blur radius, and color

2. Border-radius Is used to set the rounded border

Value: Can be length or percentage

Value format: two parameters, separated by /; The first parameter indicates the horizontal radius or half axis, and the second parameter indicates the vertical radius or half axis. If the second parameter value is omitted, the first parameter value is copied directly.

One to four parameter values are allowed for each parameter. If all four parameters are provided, they indicate top left top-left, top right top-right, bottom right bottom-right, and bottom left bottom-left respectively. If you provide three parameter values, the first is top-left, the second is top-right and bottom-left, and the third is bottom-right; If you provide two parameter values, the first for top-left and bottom-right, and the second for top-right and bottom-left; If only one is provided, it will be used for four corners

So if you write it all out it should look like this

Border-radius: horizontal up left horizontal up right horizontal down right Horizontal down left/vertical up left vertical up right vertical down right vertical down left

Border-radius can also be divided into border-top-left-RADIUS, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius respectively Set 4 angles.

But according to the actual needs to set, many times will not set that much

<head>
  <style>      
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div></div>
</body>
Copy the code

3. Border-image Sets the border background image

Border-image is also a compound property that can be set to 5 values:

  • Border-image-source Sets the image source, which can be the image path or gradient
.test {
    border: 10px solid;
    border-image: linear-gradient(red, yellow) 10;
}
Copy the code
  • Border-image-slice is used to set where the image is split

This property specifies that the image is divided from top, right, bottom, and left. The image is divided into four corners, four edges, and nine parts in the middle area, which is always transparent (that is, no image fill) unless the keyword fill is used

In addition to the fill keyword, this attribute accepts 1 to 4 parameter values. If all four parameter values are provided, they are divided in the order of top, right, bottom, and left. Provide three, the first for the top, the second for the left and right, and the third for the bottom; Provide two, the first for top and bottom, the second for left and right; Only one value is provided, and the top, right, bottom and left are divided by this value.

.demo {
    border-image-slice: 25% 30% 12% 20%;
}
Copy the code
  • Border-image-width Indicates the thickness of the border background image

The default value is 1, so the value will be 1 * border-width, which is equivalent to using the definition of border-width directly. It could be percentages or lengths

  • Border-image-outset Sets the extension size of border background image

That is, the distance the border image is offset from the border boundary

This attribute accepts 1 to 4 parameter values. If all four parameter values are provided, they are applied to the four sides in the order of top, right, bottom, and left. Provide three, the first for the top, the second for the left and right, and the third for the bottom; Provide two, the first for top and bottom, the second for left and right; It only provides one, and it works on all four sides.

The thickness itself does not occupy the layout space, so it does not affect the layout

  • Border-image-repeat Indicates whether the image is repeated

Values:

Stretch: Stretch to fill the border image area

Repeat: Repeat tiled fill border image area. When the image hits the boundary, the excess is truncated

Round: Similar to repeat. However, when the background image cannot be tiled in integer numbers, the image will be scaled according to the situation

Space: Similar to repeat, but when the background image cannot be tiled in integer numbers, empty Spaces are filled around the image

Border-image-repeat can accept 1 or 2 parameter values. If two parameters are provided, the first one is used for the horizontal direction and the second for the vertical direction. If only one is provided, the value applies both horizontally and vertically.