Bạn có thể cung cấp cho bất kỳ phần tử nào “góc tròn” bằng cách áp dụng bán kính đường viền thông qua CSS. Bạn sẽ chỉ nhận thấy nếu có liên quan đến sự thay đổi màu sắc. Ví dụ: nếu

Bạn đang xem: bán kính đường viền hình nền css

Bạn có thể cung cấp cho bất kỳ phần tử nào” các góc được làm tròn “bằng cách áp dụng border-radius < / code> thông qua CSS. Bạn sẽ chỉ nhận thấy nếu có liên quan đến sự thay đổi màu sắc. Ví dụ: nếu phần tử có màu nền hoặc đường viền khác với phần tử ở trên.

  .element {
  bán kính đường viền: 10px;
}  

Bây giờ không cần thiết , nhưng để được hỗ trợ trình duyệt tốt nhất có thể, bạn có thể đặt tiền tố thuộc tính bằng -webkit- -moz- thành đảm bảo các trình duyệt cũ có thể tham gia cuộc vui:

  .element {
  / * Safari 3-4, iOS 1-3.2, Android 1.6- * /
  -webkit-border-radius: 12px;

  / * Firefox 1-3.6 * /
  -moz-border-radius: 12px;
  
  / * Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ * /
  bán kính đường viền: 12px;
}  

Lưu ý thứ tự của các thuộc tính đó: tiền tố của nhà cung cấp được liệt kê đầu tiên và phiên bản không có tiền tố “spec” được liệt kê sau cùng. Đây là cách chính xác để làm điều đó. Bán kính đường viền là một ví dụ đặc biệt tốt về lý do tại sao chúng tôi làm theo cách đó. Trong phiên bản phức tạp hơn một chút khi sử dụng border-radius (trong đó bạn chuyển hai giá trị thay vì một), tiền tố nhà cung cấp -webkit- cũ hơn sẽ thực hiện điều gì đó hoàn toàn khác với “spec " phiên bản. Vì vậy, nếu chúng ta sao chép / dán một cách mù quáng các giá trị giống nhau vào cả ba thuộc tính, chúng ta có thể thấy các kết quả khác nhau trên nhiều trình duyệt. Tìm hiểu thêm về trường hợp này . Để có tính nhất quán lâu dài, tốt nhất bạn nên liệt kê phiên bản "đặc điểm kỹ thuật" sau cùng.

Ngày nay, việc bỏ tiền tố và chỉ sử dụng bán kính biên giới, như đã thảo luận ở đây là điều khá thực tế.

Nếu phần tử có nền hình ảnh, phần tử đó sẽ được cắt ở góc tròn một cách tự nhiên:

  .element {
  bán kính đường viền: 20px;
  background: url (bglines.png); / * sẽ bị cắt * /
}  

Đôi khi, bạn có thể thấy "rò rỉ" background-color bên ngoài đường viền khi có border-radius . ( xem ). Để tránh điều này, bạn sử dụng background-clip:

  .element {
  bán kính đường viền: 10px;

  / * Ngăn chặn rò rỉ màu nền * /
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}  

Chỉ với một giá trị, border-radius sẽ giống nhau trên tất cả bốn góc của phần tử. Nhưng đó không phải là trường hợp. Bạn có thể xác định từng góc riêng biệt nếu muốn:

  .element {
  / * trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái * /
  bán kính đường viền: 5px 10px 15px 20px;
}  

Bạn cũng có thể chỉ định hai hoặc ba giá trị. MDN giải thích rõ:

Nếu giá trị một được đặt, bán kính này áp dụng cho tất cả 4 góc .
Nếu hai giá trị được đặt, thì < strong> đầu tiên áp dụng cho góc trên cùng bên trái dưới cùng bên phải , thứ hai áp dụng cho trên cùng bên phải < / code> và góc dưới cùng bên trái .
Bốn giá trị áp dụng cho trên cùng bên trái , trên cùng bên phải < / code>, góc bottom-right , bottom-left theo thứ tự đó. Giá trị
Ba : Giá trị thứ hai áp dụng cho < mã> trên cùng bên phải
và cả dưới cùng bên trái .

  .element {
  bán kính đường viền: 5px 20px 5px;
  nền: # BADA55;
}  

Bạn cũng có thể chỉ định các bức xạ mà trong đó góc được làm tròn. Nói cách khác, hình tròn không nhất thiết phải tròn hoàn hảo mà có thể là hình elip. Điều này được thực hiện bằng cách sử dụng dấu gạch chéo (“/”) giữa hai giá trị.

  .element {
  bán kính đường viền: 10px / 30px; / * bán kính ngang / bán kính dọc * /
}  

Lưu ý: Firefox chỉ hỗ trợ đường viền hình elip trong các trình duyệt WebKit 3.5+ trở lên (ví dụ: Safari 4) xử lý sai 40px 10px giống với 40px / 10px .

Bạn có thể chỉ định giá trị của border-radius theo phần trăm. Điều này đặc biệt hữu ích khi muốn tạo hình tròn hoặc hình elipse , nhưng có thể được sử dụng bất cứ lúc nào bạn muốn bán kính đường viền tương quan trực tiếp với chiều rộng của phần tử.

  .element {
  bán kính biên giới: 50%;
  chiều rộng: 200px;
}  

Lưu ý: Trong Safari, giá trị phần trăm cho bán kính đường viền chỉ được hỗ trợ trong 5.1+. Trong Opera, chỉ được hỗ trợ từ 11.5+.

Dưới đây là từng sản phẩm riêng lẻ, với các tiền tố của nhà cung cấp:

  .element {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;
}  

Mỗi giá trị đó cũng có thể có một giá trị được phân tách bằng dấu cách, chẳng hạn như 5px 10px , hoạt động giống như một giá trị được phân tách bằng dấu gạch chéo trong cách viết tắt (bán kính ngang [khoảng trắng] bán kính dọc).

Bản trình diễn

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

4 *

3 *

9

12

3.1 *

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

102

101

2.1 *

3.2 *

Thông tin thêm


Xem thêm những thông tin liên quan đến chủ đề bán kính biên giới ảnh nền css

Full screen background image with CSS | #shorts

  • Tác giả: Learn Web
  • Ngày đăng: 2022-02-10
  • Đánh giá: 4 ⭐ ( 7712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Full screen background image with CSS | Background image with CSS
    Set the full screen background image with CSS.
    In this tutorial, we will be learning basic HTML & CSS course to create a full screen background image.

    css shorts backgroundImage

    👉Subscribe To Learn Web : https://www.youtube.com/c/LearnWebTutorial

    Video Link:
    Full screen background image with CSS | shorts: https://youtu.be/yI9ykHtpbY8

    Watch Other Videos:
    How To Make a Responsive Landing Page Website Design Using HTML CSS & Javascript: https://youtu.be/wicDKaNJSg4

    About us Page in HTML and CSS: https://youtu.be/c4OVt3eK0EY

    responsive about us page: https://youtu.be/llVt3SX_VsY

    Responsive Navigation Bar: https://youtu.be/jE5SPRuQ_-w

    Float And Clear Properties Explained: https://youtu.be/u-R36D633A0

    How To Create a Website Using HTML And CSS - Simple & Easy: https://youtu.be/QC53Xvtj33E

    Full Screen Background Image With HTML CSS | LEARN WEB: https://youtu.be/37ptFnKp3jY

    How to Make Ecommerce Website Using HTML & CSS: https://youtu.be/9XtJB_JA9DA

    Queries:
    Background image css
    Background image in html
    How to add background image in html
    Css background image
    How to add background image in css
    How to set background image in css
    Html background image
    Background image in css
    How to set background image in html

    Thanks for watching the video

Cách áp dụng CSS cho thẻ image, ảnh nền

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 5510 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học cách áp dụng CSS cho thẻ image, ảnh nền đảm bảo đơn giản, dễ thực hiện. Hãy tham khảo ngay bài viết dưới đây, FUNiX sẽ hướng dẫn chi tiết cho bạn!

css-sprites

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 6579 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Helpex - Trao Đổi & Giúp Đỡ - chia sẻ, hỏi đáp kiến thức các lĩnh vực, gặp gỡ các chuyên gia kế toán, it...

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 9681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền ...

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 1991 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 09: Làm Việc Với Nền

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 7272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc với nền (background) là việc mà bạn sẽ thực hiện rất nhiều trong CSS. Như chọn màu nền, ảnh nền, cách hiển thị ảnh nền,..

Thuộc tính bán kính đường viền và thu gọn biên giới của CSS3: sụp đổ không trộn lẫn. Làm cách nào tôi có thể sử dụng bán kính đường viền để tạo bảng bị sập với các góc tròn?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2601 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tôi đã hiểu rồi. Bạn chỉ cần sử dụng một số bộ chọn đặc biệt. Vấn…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tốt hơn để lấy thời gian tính bằng mili giây trong javascript? - javascript lấy thời gian hiện tại tính bằng mili giây

By ads_php