Cách tạo đường viền 0.5px bằng CSS3

Việc xử lý chi tiết trên giao diện front-end là yếu tố quan trọng giúp sản phẩm trông chuyên nghiệp và tinh tế. Đường viền là một thành phần phổ biến trong thiết kế web. Mặc dù việc không sử dụng đường viền 0.5px có thể không ảnh hưởng nhiều đến giao diện chung, nhưng để làm hài lòng người dùng và tạo ấn tượng tốt hơn, việc chú trọng đến những chi tiết nhỏ này là điều cần thiết.

Bài viết này sẽ hướng dẫn bạn các phương pháp để hiển thị đường viền với độ dày 0.5px:

Phương pháp 1: Sử dụng Gradient

Để hiểu sâu hơn về gradient, bạn có thể tham khảo các bài viết sau:

CSS3 Gradient (Độ dốc)

Hiểu sâu về CSS3 gradient gradient chéo

Nguyên lý thực hiện:

Thiết chiều cao của phần tử giả (pseudo-element) là 1px, sử dụng nền gradient với một nửa có màu và một nửa trong suốt. Ví dụ thực tế: Trang web Baidu Nuomi (nếu chưa được cập nhật) Mã ví dụ:```

        .vienMau::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 50%, rgba(255,0,0,0) 100%);
        }
    </style>
</head>
<body>
    <div class="hopChua">
        <h2>Phương pháp 1: Sử dụng Gradient</h2>
        <div class="vienMau">
            <p>Nguyên lý: Chiều cao 1px, nền gradient, một nửa có màu, một nửa trong suốt.</p>
        </div>
    </div>
</body>

**Phương pháp 2: Sử dụng Thu phóng (Scaling)**Nguyên lý: Sử dụng transform:scale() để thu nhỏ kích thước xuống một nửa. Ví dụ thực tế: Trang web JD.com Mã ví dụ:```

        .vienNen::after{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background-color: #ff0000;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            transform-origin: bottom;
        }

    </style>
</head>
<body>
    <div class="hopChua">
        <h2>Phương pháp 2: Sử dụng Thu phóng</h2>
        <div class="vienNen">
           <p>Nguyên lý: Thu nhỏ theo chiều dọc (trục Y) xuống một nửa.</p> 
        </div>
    </div>
</body>

Mở rộng: Áp dụng cho cả 4 cạnhNguyên lý: Sử dụng transform:scale() nhưng lần này thu nhỏ toàn bộ nội dung.Mã ví dụ:```

        .vienToanBo::after{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 200%;
            border: 1px solid #ff0000;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
            border-radius: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="hopChua">
        <h2>Mở rộng: Tạo viền 0.5px cho cả 4 cạnh</h2>
        <div class="vienToanBo">
           <p>Đây là cách tạo đường viền 0.5px cho cả 4 cạnh của một hộp. Khi sử dụng với border-radius, bạn có thể gặp hiện tượng mép viền mờ trên một số thiết bị di động, nhưng ảnh hưởng không đáng kể. Nếu có hai hộp xếp chồng lên nhau, một hộp có viền và một hộp không có viền, cùng chiều rộng, bạn có thể gặp hiện tượng lệch 0.5px trên thiết bị di động. Nguyên nhân là do cách trình duyệt xử lý viền. Thuộc tính z-index có thể điều chỉnh theo nhu cầu cụ thể.</p>
        </div>
    </div>
</body>

Thành phố Cuồng loạn

Cách tạo đường viền 0.5px bằng CSS3

Thẻ Phổ Biến