Nền bán kính đường viền css trong suốt

Nút có độ dốc đường viền, bán kính đường viền và nền trong suốt. Tôi không tìm thấy giải pháp hợp lệ trực tuyến nên tôi đã tự viết mã. từ css

Trong bài viết này, chúng ta sẽ tạo một đường viền trong suốt trong CSS và bạn sẽ thấy đối tượng phía sau đường viền trong suốt hiện ra. Chúng tôi sẽ khám phá các ví dụ khác nhau ở đây để cung cấp cho bạn sự hiểu biết đầy đủ về khái niệm đường viền trong suốt

Ví dụ 1

Mở một tệp mới trong Visual Studio Code. Khi tệp trống này mở ra, hãy chọn ngôn ngữ. Ở đây, chúng tôi tạo một mã HTML, vì vậy chúng tôi chọn ngôn ngữ HTML. Khi chúng ta chọn ngôn ngữ này thì file được tạo ở đây là file HTML. Vì vậy, khi lưu tệp này, chúng tôi không cần đề cập đến phần mở rộng của tệp. Sau đó, nhập các thẻ HTML cơ bản hoặc đặt “. ” rồi nhấn “Enter”. Bạn sẽ tự động nhận được tất cả các thẻ cơ bản cần thiết cho HTML

Bây giờ, chúng tôi liên kết tệp này với tệp CSS “trong suốt. css”. Trong phần nội dung, chúng tôi sử dụng thẻ tiêu đề trước để tạo tiêu đề. Sau đó, chúng ta tạo hai div với tên “inner” và “outer”. Sau đó, một lần nữa, chúng tôi đặt tiêu đề xuất hiện bên trong div thứ hai. Bây giờ, chúng tôi đóng các div này ở đây. Chúng tôi tạo một đường viền trong suốt ở đây bằng cách sử dụng thuộc tính “đường viền” trong CSS và đặt màu RGBA trong thuộc tính đường viền này

Chúng tôi áp dụng màu “maroon” cho các tiêu đề mà chúng tôi đã tạo trước đó. “Bên ngoài” là để đề cập đến lớp div đầu tiên và chúng tôi đặt “chiều rộng” của nó thành “300px”. “Chiều cao” của div đầu tiên này là “300px” và “lề” ở đây là “10%”. Bây giờ, sau tất cả các thuộc tính này, chúng tôi đặt thuộc tính "đường viền" và đặt giá trị của nó thành giá trị RGBA. Chúng tôi cũng đặt giá trị alpha ở đây để làm cho đường viền trong suốt. Chúng tôi đặt “đường viền” thành “10px” “chiều rộng” và ở dạng “solid”. RGBA chúng tôi đặt ở đây là “rgba (0, 0, 0,. 4)” trong đó “rgb (0, 0, 0)” được sử dụng cho màu đen. Nhưng ở đây, chúng tôi thêm một số giá trị minh bạch là “0. 4". “Border-radius” được đặt thành “5px”, vì vậy các cạnh của đường viền hơi cong một chút

Bây giờ, chúng tôi cũng đề cập đến tên div thứ hai ở đây là "bên ngoài". Và chúng tôi sử dụng một số thuộc tính ở đây cho div thứ hai này. Chúng ta phải đặt kích thước của div thứ hai này nhỏ hơn div thứ nhất. Vì vậy, chúng tôi đặt “chiều rộng” và “chiều cao” của nó thành “270px” cho mỗi người trong số họ. “Ký quỹ” của nó là “auto” và “margin-top” là “3%”. Chúng tôi đặt “nền” là “rgba(0, 0, 0, 0. 4)”, giống như đường viền của div đầu tiên. “Border-radius” ở đây cũng là “5px” và “padding” chúng ta sử dụng cũng là “5px”

Ở đây, bạn có thể thấy rằng đường viền trong suốt khi chúng tôi áp dụng một số giá trị alpha trong giá trị RGBA của đường viền. Nếu chúng ta đặt một số đối tượng phía sau đường viền này, nó sẽ hiển thị với chúng ta

Ví dụ #2

Đây là ví dụ thứ hai của chúng tôi và chúng tôi tạo một vùng chứa div trống sau tiêu đề. Chúng tôi đặt hình ảnh trong div này và áp dụng đường viền trong suốt trên hình ảnh bằng cách sử dụng các thuộc tính CSS

Chúng tôi đặt “màu” thành “h1” là “maroon”. Chúng tôi sử dụng vùng chứa “div” ở đây và đặt “chiều rộng” của nó thành “300px” và “chiều cao” của nó thành “300px”. Chúng tôi cũng sử dụng "phao" ở đây để thả div này sang "trái". Chúng tôi đặt "nền" của div này và đặt "mypicture. png” làm nền của div này. Chúng tôi đặt đường dẫn của hình ảnh này trong “url” và đặt “url” này làm giá trị của thuộc tính “background”. Chúng tôi sử dụng thuộc tính “margin” và đặt nó thành “20px”. “Phần đệm” cũng được đặt thành “20px”. Đối với “đường viền”, chúng ta sử dụng giá trị “chiều rộng” là “25px” của loại “solid”. Vì chúng ta muốn tạo viền trong suốt, chúng ta phải sử dụng màu “rgba” ở đây chúng ta đặt giá trị alpha để tạo viền trong suốt. Giá trị màu rgba là “rgba(143, 9, 9, 0. 5)”. Ba giá trị đầu tiên hiển thị màu đỏ nhưng ở đây, 0. 5 áp dụng một số hiệu ứng trong suốt trên đường viền này. Bây giờ, đối với toàn bộ “body”, chúng ta đặt giá trị thuộc tính “padding” thành “90px”

Đầu ra ở đây chứa một hình ảnh. Bạn có thể nhận thấy đường viền xung quanh hình ảnh này. Đường viền này trong suốt vì chúng ta có thể nhìn thấy hình ảnh phía sau đường viền. Ở các góc của hình ảnh, chúng ta có thể thấy rằng màu sắc của hình ảnh bị mờ đi do chúng ta có một viền trong suốt xung quanh hình ảnh

Ví dụ #3

Trong HTML này, một lần nữa chúng ta chỉ tạo một div. Bây giờ, sử dụng các thuộc tính CSS, chúng tôi đặt hình ảnh vào div này và áp dụng một đường viền trong suốt cho nó

Đầu tiên, chúng ta phải đặt tên của vùng chứa div mà chúng ta đã đặt trong mã HTML. Sau đó, chúng tôi đặt các dấu ngoặc nhọn. Bên trong các dấu ngoặc nhọn này, chúng tôi đặt "nền" để đặt nền cho div này. Chúng tôi đặt hình ảnh trong “url” và “url” này ở đây là giá trị của thuộc tính “background” của CSS. Chúng tôi sử dụng “đường viền” và tăng “chiều rộng” của đường viền này trong ví dụ này. Chúng tôi đặt “chiều rộng” của nó thành “50px” và đường viền này ở dạng “đặc”. Chúng tôi sử dụng “rgba” ở đây mà chúng tôi đã thảo luận trong ví dụ trước của chúng tôi. Chúng tôi đặt giá trị của alpha là “0. 5” đại diện cho độ trong suốt của màu viền này. "Chiều cao" của "div" này. wrap” là “300px” và “width” là “500px”, vì vậy, nó sẽ xuất hiện hình chữ nhật. “Lề” mà chúng tôi đặt ở đây là “50px”

Nhìn vào đầu ra sau và chú ý đường viền. Tại đây, bạn có thể thấy rằng phần hình ảnh hiện diện phía sau đường viền hiển thị với chúng tôi. Nó có nghĩa là đường viền này trong suốt. Chúng ta có thể tạo đường viền trong suốt này bằng cách đặt giá trị alpha trong đường viền với màu rgba

Phần kết luận

Bài viết này được trình bày nhằm giúp các bạn nắm được các thuộc tính của CSS giúp chúng ta có thể tạo đường viền trong suốt trong CSS. Hướng dẫn này đã đi qua chủ đề này kỹ lưỡng. Chúng tôi đã trình bày ba ví dụ riêng biệt ở đây, nơi chúng tôi đã thiết kế đường viền trong suốt bằng cách sử dụng thuộc tính đường viền. Chúng tôi cũng đã sử dụng các giá trị rgba trong thuộc tính đường viền này để tạo cơ hội đặt các giá trị alpha để làm cho đường viền của chúng tôi trong suốt. Chúng tôi cũng đã định nghĩa "đường viền trong suốt" này vì đây là đường viền mà từ đó chúng tôi đã nhìn thấy đối tượng phía sau nó. Trong bài viết này, chúng tôi đã bao gồm kết quả của tất cả các mã này và chúng tôi đã giải thích chúng đầy đủ chi tiết tại đây. Hi vọng sau khi chăm chú theo dõi bài viết này các bạn có thể tạo được “viền trong suốt” này cho các dự án của mình

Sự khác biệt giữa bán kính đường viền 50% và 100% là gì?

Đường viền CSS có thể có bán kính không?

Sự khác biệt giữa bán kính đường viền và đường viền là gì?