Nhà phát triển có thể áp dụng nhiều thuộc tính CSS để làm cho trang web của họ hấp dẫn hơn, chẳng hạn như “ chiều cao ' Và ' chiều rộng ” thuộc tính để đặt kích thước, “ căn chỉnh văn bản ” để điều chỉnh văn bản, “ kiểu viền ' Và ' bán kính đường viền ” thuộc tính để đặt đường viền xung quanh phần tử. Ngoài ra, bạn có thể thêm đường viền theo yêu cầu của mình, chẳng hạn như ở một bên của phần tử, chỉ để làm cho những thứ phía sau đối tượng dễ nhìn thấy hơn.
Bài đăng này sẽ chứng minh:
Phương pháp 1: Đặt viền ở một bên
Trong CSS, người dùng có thể thiết lập đường viền ở một bên của phần tử mong muốn. Với mục đích này, “ biên giới bên trái ”, “ biên giới bên phải ”, “ đường viền trên cùng ' Và ' viền dưới ” thuộc tính được sử dụng để thêm đường viền ở bên trái, bên phải, trên cùng hoặc dưới cùng.
Trong phần này, chúng tôi sẽ đặt cụ thể đường viền ở phía bên trái của vùng chứa. Để làm như vậy, hãy làm theo các hướng dẫn được đề cập dưới đây.
Bước 1: Tạo div Container
Đầu tiên, tạo một vùng chứa div với sự trợ giúp của “ Bước 2: Chèn tiêu đề Tiếp theo, sử dụng “< h1> ” để thêm tiêu đề bên trong vùng chứa div. Ngoài ra, bạn cũng có thể sử dụng các thẻ tiêu đề khác tùy theo yêu cầu, chẳng hạn như “< h1> ” thành “< h6> ” thẻ: Bây giờ, hãy truy cập bộ chứa div HTML và truy cập tên lớp. Để làm như vậy, một bộ chọn lớp “ # ” được sử dụng với tên lớp. Bước 4: Chỉ chèn đường viền trên một mặt Sau khi truy cập vùng chứa div, hãy áp dụng các thuộc tính CSS được đề cập bên dưới: Hình ảnh kết quả chỉ hiển thị đường viền có một bên: Để đặt đường viền trên tất cả các mặt với các màu khác nhau, hãy sử dụng mã HTML ở trên. Sau đó, truy cập vùng chứa div với sự trợ giúp của tên id và bộ chọn: Do đó, đường viền với các kiểu khác nhau ở mỗi bên sẽ được áp dụng: Để chỉ đặt đường viền ở một bên, trước tiên, hãy tạo một div bằng cách sử dụng “
< h1 > Biên giới ở một bên h1 >
div >
Có thể thấy rằng vùng chứa đã được tạo thành công:
Bước 3: Truy cập div Container
đường viền bên trái: 5px liền màu đỏ ;
nền: rgb ( 56 , 239 , 245 ) ;
lề: 20px 100px;
chiều rộng: 200px; chiều cao: 150px
}
Đây:
Phương pháp 2: Đặt viền trên tất cả các mặt với các kiểu khác nhau
lề: 80px;
chiều rộng đường viền: 8px 2px 1px 10px;
bán kính đường viền: 50px;
kiểu đường viền: chèn dấu chấm đôi rắn;
màu viền: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Trong mã được cung cấp ở trên:
Trong bài viết này, bạn đã học được các cách khác nhau để đặt đường viền CSS ở một bên và nhiều bên. Phần kết luận