Như đã biết, thuộc tính độ mờ của CSS làm cho toàn bộ phần tử trở nên bán trong suốt. Đó là lý do tại sao chúng ta không thể sử dụng nó để đặt độ mờ của đường viền. Để đặt độ mờ của đường viền, chúng ta có thể sử dụng giá trị màu RGBA với thuộc tính đường viền

Nếu bạn gặp khó khăn như vậy khi đặt độ mờ của đường viền, bạn đang ở đúng nơi. Hãy xem điều này được thực hiện như thế nào

Example
Set a border opacity with CSS

• Sử dụng thuộc tính đệm
• Thêm thuộc tính đường viền và sử dụng giá trị “rgba” cho nó
• Đặt thuộc tính clip nền thành “hộp đệm” cho Firefox 4+, Chrome và Opera
• Sử dụng tiền tố -webkit- với clip nền cho Safari

div {
  padding: 10px;
  border: 1px solid rgba(255, 0, 0);
  border-top: 1px solid rgba(255, 0, 0, .3);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

Ví dụ đầy đủ trông giống như sau

Kết quả

Đặt độ mờ viền bằng CSS

Tuy nhiên, phương pháp này có thể gặp một số vấn đề, vì một số trình duyệt không hiểu định dạng RGBA và hoàn toàn không hiển thị bất kỳ đường viền nào. Để làm được điều đó, chúng ta có thể sử dụng hai thuộc tính đường viền, một thuộc tính có RGB và thuộc tính kia có màu RGBA. Nếu có thể, trình duyệt sẽ sử dụng cái thứ hai, nếu không, cái thứ nhất

Next, add a heading with the help of the “

” tag and use the “align” attribute to specify the heading at the center of the div. Then, add the text between the added headings tags:

="nội dung bên ngoài">="outer-content" >

="trung tâm">Linuxhint ="center">Linuxhint Tutorial Website LTD UK>

>>

đầu ra

Bước 3. Đặt màu nền

cơ thể {

màu nền. rgb(8, 8, 14);

}

Tại đây, truy cập nội dung theo tên thẻ và chỉ định màu nền bằng cách sử dụng thuộc tính “màu nền”

Bước 4. Tiêu đề kiểu với CSS

h1 {

màu. rgb(23, 83, 5);

}

Bây giờ, hãy áp dụng thuộc tính “color” để tạo kiểu cho văn bản tiêu đề bằng cách sử dụng tên thẻ “h1”

Bước 5. Tạo đường viền chắc chắn

Tiếp theo, truy cập vào “. lớp nội dung bên ngoài” và chỉ định các thuộc tính CSS được đề cập

.outer-content {

đường viền. 10px rắn rgb(25, 140, 194);

chiều rộng. 200px;

chiều cao. 200px;

lề. tự động;

căn chỉnh văn bản. trung tâm;

bán kính đường viền. 7px;

phần đệm. 4px;

}

Nơi đây

• Thuộc tính "biên giới" được sử dụng để tạo đường viền xung quanh một phần tử
• “Chiều rộng” chỉ định chiều rộng của phần tử
• Thuộc tính “height” phân bổ chiều cao cho vùng chứa
• “Lề” xác định không gian bên ngoài của đường viền đã xác định
• Thuộc tính “text-align” được sử dụng để đặt văn bản ở giữa
• Thuộc tính "bán kính đường viền" làm tròn góc đường viền theo giá trị
• “padding” chỉ định không gian xung quanh nội dung phần tử

Có thể nhận thấy rằng một đường viền cố định đã được đặt xung quanh phần tử

Bước 6. Làm cho đường viền trong suốt

đường viền. 10px rắn rgba(114 . 3, 200, 240, 0.3);

Để làm cho đường viền trong suốt, hãy sử dụng thuộc tính "đường viền" và gán giá trị bằng bộ chọn màu "rgba". Ở đây, ba giá trị đầu tiên chỉ định màu rgb và giá trị thứ tư đặt độ mờ của đường viền. Chẳng hạn, độ mờ được gán là “0. 3” để làm cho đường viền trong suốt

đầu ra

Blog này mình đã hướng dẫn làm khung viền trong suốt bằng CSS

Phần kết luận

Để tạo đường viền trong suốt bằng CSS, trước tiên, hãy truy cập div với sự trợ giúp của “lớp” được chỉ định. Sau đó, sử dụng thuộc tính “đường viền” và đặt màu và độ mờ của đường viền bằng công cụ chọn màu “rgba”. Trong đó “rgb” dành cho các màu đỏ, xanh lá cây và xanh lam và “a” được sử dụng để đặt giá trị độ mờ để làm cho đường viền trong suốt. Bài đăng này giải thích quy trình làm cho đường viền trong suốt bằng CSS

Chúng tôi có thể cung cấp độ mờ cho đường viền trong CSS không?

Như đã biết, thuộc tính độ mờ CSS làm cho toàn bộ phần tử trở nên bán trong suốt. Đó là lý do tại sao chúng tôi không thể sử dụng nó để đặt độ mờ của đường viền . Để đặt độ mờ của đường viền, chúng ta có thể sử dụng giá trị màu RGBA với thuộc tính đường viền.

Mã CSS cho trong suốt là gì?

Từ khóa trong suốt tương đương với rgba(0,0,0,0) là giá trị được tính toán của nó. Vì vậy, bạn cũng có thể sử dụng rgba(0,0,0,0) để đạt được hiệu quả tương tự.