<line-style>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Kiểu giá trị enumerated <line-style> đại diện cho các giá trị từ khóa xác định kiểu của một đường, hoặc sự vắng mặt của một đường. Các giá trị từ khóa <line-style> được dùng trong các thuộc tính border và column dạng viết đầy đủ và viết tắt sau:

Cú pháp

Giá trị

Kiểu liệt kê <line-style> được chỉ định bằng một trong các giá trị được liệt kê bên dưới:

none: Không hiển thị đường nào. Giá trị tính toán của độ rộng đường là 0 ngay cả khi một giá trị độ rộng được chỉ định. Trong trường hợp ô bảng và thu gọn đường viền, giá trị none có độ ưu tiên thấp nhất. Nếu có bất kỳ đường viền xung đột nào khác được đặt, nó sẽ được hiển thị. Giá trị none tương tự hidden.
hidden: Không hiển thị đường nào. Độ rộng tính toán của đường là 0 ngay cả khi một giá trị độ rộng được chỉ định. Trong trường hợp ô bảng và thu gọn đường viền, giá trị hidden có độ ưu tiên cao nhất. Nếu có bất kỳ đường viền xung đột nào khác được đặt, nó sẽ không được hiển thị. Giá trị hidden tương tự none, nhưng hidden không phải là giá trị hợp lệ cho kiểu đường viền ngoài.
dotted: Hiển thị một chuỗi các chấm tròn. Bán kính của các chấm là một nửa giá trị tính toán của độ rộng đường. Khoảng cách giữa các chấm không được xác định bởi đặc tả và phụ thuộc vào triển khai.
dashed: Hiển thị một chuỗi các gạch ngang ngắn hoặc đoạn đường có đầu vuông. Kích thước và chiều dài chính xác của các đoạn không được xác định bởi đặc tả và phụ thuộc vào triển khai.
solid: Hiển thị một đường liền mạch, thẳng duy nhất.
double: Hiển thị hai đường thẳng với một khoảng trống ở giữa. Chiều dài của các đường cộng lại bằng kích thước pixel được xác định bởi độ rộng đường.
groove: Hiển thị đường viền có vẻ ngoài như được khắc. Giá trị này là đối lập của ridge.
ridge: Hiển thị đường viền có vẻ ngoài như được đùn ra. Giá trị này là đối lập của groove.
inset: Hiển thị đường viền làm cho phần tử trông như được nhúng vào. Giá trị này là đối lập của outset. Khi áp dụng cho đường viền ô bảng và border-collapse được đặt thành collapsed, giá trị này hoạt động như groove.
outset: Hiển thị đường viền làm cho phần tử trông như được nổi lên. Giá trị này là đối lập của inset. Khi áp dụng cho ô bảng với border-collapse được đặt thành collapsed, giá trị này hoạt động như ridge.

Note: Khi <outline-style> được dùng làm kiểu giá trị cho các thuộc tính outline và outline-style, nó tương tự <line-style>, nhưng không hỗ trợ hidden và bao gồm giá trị auto. Khi auto được đặt, giá trị <line-style> do tác nhân người dùng xác định sẽ được sử dụng.

Cú pháp hình thức

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Ví dụ

Ví dụ đầu tiên minh họa tất cả các giá trị từ khóa <line-style>. Ví dụ thứ hai minh họa cách một số màu kiểu đường có thể hiển thị theo cách không mong đợi.

Định nghĩa các kiểu đường

Ví dụ này hiển thị tất cả các giá trị <line-style> như là giá trị cho các thuộc tính CSS border-style và column-rule-style.

HTML

Ví dụ này sử dụng nhiều phần tử <div>, mỗi phần tử có một lớp đại diện cho giá trị <line-style> đang được minh họa.

html

<div class="{line-style}">
  <p>{line-style}</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

<div class="none">
  <p>none</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="hidden">
  <p>hidden</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dotted">
  <p>dotted</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dashed">
  <p>dashed</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="solid">
  <p>solid</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="double">
  <p>double</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="groove">
  <p>groove</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="ridge">
  <p>ridge</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="inset">
  <p>inset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="outset">
  <p>outset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

Trong CSS cho ví dụ này, đường viền và quy tắc cột cho tất cả các phần tử <p> được định nghĩa có độ rộng 7px và giá trị kiểu double. Đối với mỗi đoạn văn, giá trị double sau đó được ghi đè bằng cách chỉ định một giá trị <line-style> khác cho các thuộc tính border-style và column-rule-style.

div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}

css

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: black;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

Kết quả

Lưu ý rằng đường viền màu đen không phải lúc nào cũng là màu đen.

Định nghĩa kiểu đường và màu sắc

Ví dụ này minh họa việc chọn kiểu đường và màu sắc. Với một số giá trị từ khóa <line-style>, màu của đường có thể không như bạn mong đợi. Để tạo hiệu ứng "3D" cần thiết của các kiểu groove, ridge, inset và outset khi hiển thị các giá trị này trong màu đen hoặc trắng, các tác nhân người dùng sử dụng các tính toán màu khác với bất kỳ tổ hợp màu đường nào khác.

CSS

Bốn cạnh của mỗi <div> có một giá trị <line-style> khác nhau, và mỗi mục trong danh sách có một giá trị <color> khác nhau. Chúng ta dùng nội dung được tạo ra để hiển thị CSS được khai báo nội tuyến.

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-transform: uppercase;
  font-family: monospace;
}

css

div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}

JavaScript

JavaScript tự động tạo các phần tử <div>, mỗi phần tử có border-color khác nhau được đặt.

// prettier-ignore
const colors = [
  "#000000", "#000001", "#ffffff",
  "#ff00ff", "#ffff00", "#00ffff",
  "#cc33cc", "#cccc33", "#33cccc",
  "#ff0000", "#00ff00", "#0000ff",
  "#cc3333", "#33cc33", "#3333cc",
  "#993333", "#339933", "#333399",
];

for (const c of colors) {
  const div = document.createElement("div");
  div.style.borderColor = c;
  div.textContent = c;
  document.body.appendChild(div);
}

Kết quả

Lưu ý rằng màu gần đen #000001 có thể khác với màu đen thực sự, và sự tương phản giữa các cạnh tối và sáng rõ ràng hơn khi dùng màu sáng hơn.

Thông số kỹ thuật

Specification
CSS Backgrounds and Borders Module Level 3 # typedef-line-style

Khả năng tương thích trình duyệt

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content