Cách vẽ đường thẳng trong HTML CSS

Question

Trong bài viết ngắn này, chúng ta sẽ khám phá cách vẽ các đường trang trí bằng CSS bằng cách sử dụng Phần tử giả, Ảnh nền và SVG. Sau khi đọc xong, bạn sẽ học được một số kỹ thuật thú vị để vẽ dấu phân cách phần hoặc các thành phần đường trang trí khác bằng CSS

Nội dung chính Show

yếu tố giả
URI dữ liệu SVG
Phần kết luận
Làm cách nào để vẽ một đường trong CSS?
Làm cách nào để vẽ đường thẳng trong HTML?
Điều gì được sử dụng để vẽ một dòng trong HTML?

yếu tố giả

Chúng tôi có thể tạo một

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}

1 bằng cách sử dụng bộ chọn

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

0 hoặc

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

1. Điều này thêm một phần tử con mới vào phần tử được nhắm mục tiêu của chúng tôi mà sau đó chúng tôi có thể tạo kiểu như thể đó là một phần tử bình thường

Để trình duyệt hiển thị phần tử giả, chúng ta cần đặt thuộc tính

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

2

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}

Kết quả

Bây giờ để tạo một đường trang trí, chúng ta đặt phần tử giả bên trong phần tử mà chúng ta muốn vẽ một đường trong đó

Trong các bản demo bên dưới, tôi đã căn giữa văn bản và đặt chiều cao cho phần tử để chúng ta có thể thấy rõ đường kẻ ngang chạy phía sau văn bản, lưu ý rằng các thuộc tính này không được hiển thị trong CSS ví dụ

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

Phương pháp này cho chúng ta rất nhiều sự linh hoạt nhưng sử dụng định vị tuyệt đối đòi hỏi phần tử cha phải có định vị tương đối. Điều này là do một phần tử có vị trí

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

4 được định vị so với phần tử cha đầu tiên được tìm thấy có vị trí được đặt rõ ràng thành ________ 05

Điều này hoạt động khá tốt nhưng có thể gây ra sự cố khi các phần tử con khác có chỉ mục z được áp dụng hoặc muốn được định vị tương ứng với phần tử tiếp theo trong cây DOM

Chúng ta có thể tránh vấn đề định vị bằng cách sử dụng đường viền như thế này

________số 8

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

Tuy nhiên, nó giống như một thủ thuật để tạo một phần tử để vẽ một đường thẳng và bây giờ chúng ta cần biết chiều cao của phần tử cha

Hinh nên

Chúng ta có thể sử dụng

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

7,

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

8 và

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

9 để “tạo” hình nền. Kết hợp với

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

0,

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

1 và

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

2, chúng ta có thể sử dụng các gradient này để “ăn gian” và vẽ một đường đơn giản

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

6

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

Điều này đã sạch hơn rất nhiều, chúng ta có thể làm điều này tốt hơn nữa bằng cách tạo một lớp

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

4 riêng biệt và xác định một vài thuộc tính CSS

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

9

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

0

Bây giờ chúng ta có thể áp dụng lớp

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

4 cho một phần tử và thiết lập các thuộc tính

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

6 và

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

7 để tạo kiểu cho nó

Bây giờ chúng ta cũng có thể làm mờ dần và mờ dần các dòng

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

4

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

Chúng tôi vẫn có thể đặt màu nền và có nhiều hình nền khác trên phần tử đích

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

6

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

URI dữ liệu SVG

Chúng tôi cũng có thể đặt hình nền bằng SVG nhưng tiếc là chúng tôi không thể sử dụng các biến CSS bên trong URI dữ liệu SVG

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

8

Kết quả

Nút

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

3

Tôi chưa kiểm tra điều này nhưng tôi nghi ngờ việc sử dụng SVG chậm hơn

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

7 vì nó yêu cầu trình duyệt giải mã và vẽ SVG. tuy nhiên, SVG rất mạnh nên có thể là cách tốt nhất nếu bạn cần vẽ những đường rất kỳ lạ

Phần kết luận

Có nhiều cách để chúng ta có thể vẽ các đường trang trí bằng CSS. Chúng tôi nhận thấy các phần tử giả mang lại cho chúng tôi rất nhiều tính linh hoạt nhưng cũng yêu cầu định vị có thể gây ra tác dụng phụ

Thay vào đó, việc sử dụng các hình nền được tạo có thể là một công việc hay và không gây ra các vấn đề về định vị mà các phần tử giả có thể gây ra

SVG cũng là một lựa chọn thay thế hay nhưng không thể được tạo kiểu bằng Thuộc tính tùy chỉnh CSS và có thể chậm hơn một chút so với độ dốc tuyến tính

Làm cách nào để vẽ một đường trong CSS?

CSS (SCSS) .

dòng 1 {

Chiều cao. 1px;

lai lịch. đen;

dòng 2 {

đường viền trên cùng. 1px màu đen đặc;

Làm cách nào để vẽ đường thẳng trong HTML?

Đầu tiên, chúng ta tạo đường dẫn với beginPath. Ta đặt bút/con trỏ vẽ tại vị trí x , y x,y x,y = (50,50). Sau đó, chúng ta sử dụng phương thức lineTo để vẽ một đường. Chúng tôi yêu cầu nó đánh dấu một dòng bắt đầu từ x , y x,y x,y = (50,50), được đặt bởi moveTo , thành x , y x,y x,y = (100,100)

Điều gì được sử dụng để vẽ một dòng trong HTML?

The

element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

programming html

Cách vẽ đường thẳng trong HTML CSS

yếu tố giả

Hinh nên

URI dữ liệu SVG

Phần kết luận

Làm cách nào để vẽ một đường trong CSS?

Làm cách nào để vẽ đường thẳng trong HTML?

Điều gì được sử dụng để vẽ một dòng trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội