CSS backgrounds and borders

Backgrounds, borders và box shadows thực tế

Mẫu border, background và box shadow này gồm các background image căn giữa được tạo từ linear và radial gradients. Một loạt box shadows khiến border trông như "nổi lên". Phần tử bên trái có border image được đặt. Phần tử bên phải có border chấm bo tròn.

<article>
  <div></div>
  <div></div>
</article>

article {
  display: flex;
  gap: 10px;
}
div {
  color: #58ade3;
  height: 320px;
  width: 240px;
  padding: 20px;
  margin: 10px;
  border: dotted 15px; /* defaults to `currentColor` */
  border-radius: 100px 0;
  background-image:
    radial-gradient(
      circle,
      transparent 60%,
      currentColor 60% 70%,
      transparent 70%
    ),
    linear-gradient(45deg, currentColor, white),
    linear-gradient(transparent, transparent);
  /* the third transparent background image was added to provide space for the background color to show through */
  background-color: currentColor;
  background-position: center;
  background-size:
    60px 60px,
    120px 120px;
  background-clip: content-box, content-box, padding-box;
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
  border-radius: 0;
  border-image-source: repeating-conic-gradient(
    from 3deg at 25% 25%,
    currentColor 0 3deg,
    transparent 3deg 6deg
  );
  border-image-slice: 30;
}

Các background image được định nghĩa bằng background-image. Các hình ảnh được căn giữa bằng background-position. Các giá trị khác nhau của thuộc tính background-clip cho các background image nhiều lớp được dùng để giữ background images nằm trong content box. Background color được clipped đến padding box để ngăn background xuất hiện qua các phần trong suốt đối với border-image và dotted border. Các góc bo tròn của phần tử bên phải được tạo bằng thuộc tính border-radius. Một khai báo box-shadow duy nhất được dùng để đặt tất cả các bóng, cả inset lẫn outset.

Tham chiếu

Thuộc tính

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat-x
• background-repeat-y
• background-repeat shorthand
• background-size
• background shorthand
• background-position-x
• background-position-y
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom shorthand
• border-left-color
• border-left-style
• border-left-width
• border-left shorthand
• border-right-color
• border-right-style
• border-right-width
• border-right shorthand
• border-top-color
• border-top-style
• border-top-width
• border-top shorthand
• border-color shorthand
• border-style shorthand
• border-width shorthand
• border shorthand
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius shorthand
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image shorthand
• box-shadow

Module CSS backgrounds level 4 cũng giới thiệu các thuộc tính background-position-block, background-position-inline, background-repeat-block, background-repeat-inline và background-tbd. Hiện tại, không có trình duyệt nào hỗ trợ các tính năng này.

Kiểu dữ liệu

• Kiểu liệt kê <line-style>

Hướng dẫn

Sử dụng nhiều background

Đặt một hoặc nhiều background trên một phần tử.

Thay đổi kích thước background images

Thay đổi kích thước và hành vi lặp của background images.

Scaling SVG backgrounds

Cách SVG aspect ratio, giá trị kích thước SVG và thuộc tính CSS background-size ảnh hưởng đến việc scale SVG background images.

Sử dụng CSS gradients

Tạo CSS gradients và sử dụng chúng làm background images.

Học CSS: background và borders

Học cách triển khai hình ảnh trang trí bằng CSS background images.

Học CSS: box model

Học cách borders và các thuộc tính box model khác ảnh hưởng đến CSS box model.

Khái niệm liên quan

• border-block-end-color
• border-block-start-color
• border-inline-end-color
• border-inline-start-color
• border-block-end-style
• border-block-start-style
• border-inline-end-style
• border-inline-start-style
• border-block-end-width
• border-block-start-width
• border-inline-end-width
• border-inline-start-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• box-sizing
• box-decoration-break
• text-shadow
• <url> data type
• <url> data type
• <image> data type
• position data type
• Từ khóa currentColor

Thông số kỹ thuật

Xem thêm

• filter
• backdrop-filter
• Hàm filter drop-shadow()
• Áp dụng màu cho các phần tử HTML bằng CSS
• Công cụ:
  • Border-image generator
  • Border-radius generator
  • Box-shadow generator