Sự khác biệt giữa phác thảo và đường viền

Có ai biết bất kỳ sự khác biệt nào giữa các thuộc tính 'viền' và 'phác thảo' trong CSS không? Nếu không có sự khác biệt, thì tại sao có hai thuộc tính cho cùng một thứ?

Từ: http://webdesign.about.com/od/advifiedcss/a/outline_style.htmlm

Thuộc tính phác thảo CSS là một thuộc tính khó hiểu. Khi bạn lần đầu tiên tìm hiểu về nó, thật khó để hiểu nó thậm chí còn khác xa với tài sản biên giới như thế nào. W3C giải thích nó có những khác biệt sau:

1. Đường dẫn không chiếm không gian.

2. Đường nét có thể không phải là hình chữ nhật.

Ngoài một số câu trả lời khác ... đây là một vài điểm khác biệt tôi có thể nghĩ đến:

1) Góc tròn

borderhỗ trợ các góc tròn với border-radiustài sản. outlinekhông.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

VĨ CẦM

(NB: Mặc dù firefox có thuộc -moz-outline-radiustính cho phép các góc được làm tròn trên phác thảo ... thuộc tính này không được xác định trong bất kỳ tiêu chuẩn CSS nào và không được các trình duyệt khác ( nguồn ) hỗ trợ )

2) Chỉ tạo kiểu một bên

đường viền có các thuộc tính để tạo kiểu cho mỗi bên border-top:, border-left:v.v.

phác thảo không thể làm điều này. Không có phác thảo hàng đầu: vv Tất cả hoặc không có gì. (xem bài viết SO này )

3) bù

phác thảo hỗ trợ bù đắp với phần bù phác thảo thuộc tính . biên giới không.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

VĨ CẦM

Lưu ý: Tất cả các trình duyệt chính hỗ trợ outline-offsetngoại trừ Internet Explorer

Hơn nữa với các câu trả lời khác, phác thảo thường được sử dụng để gỡ lỗi. Opera có một số kiểu CSS người dùng đẹp sử dụng thuộc tính phác thảo để cho bạn biết tất cả các thành phần trong tài liệu.

Nếu bạn đang cố gắng tìm hiểu tại sao một yếu tố không xuất hiện ở nơi bạn mong đợi hoặc ở kích thước bạn mong đợi, hãy thêm một vài phác thảo và xem vị trí của các yếu tố đó.

Như đã đề cập, phác thảo không chiếm không gian. Khi bạn thêm đường viền, tổng chiều rộng / chiều cao của phần tử trong tài liệu sẽ tăng, nhưng điều đó không xảy ra với phác thảo. Ngoài ra, bạn không thể đặt phác thảo về các mặt cụ thể như đường viền; Đó là tất cả hoặc không có gì.

tldr;

W3C giải thích nó có những khác biệt sau:

• Đề cương không chiếm không gian.
• Đề cương có thể không phải là hình chữ nhật.

Nguồn

Đề cương nên được sử dụng cho khả năng tiếp cận

Cũng cần lưu ý rằng mục đích chính của phác thảo là khả năng tiếp cận. Đặt nó để phác thảo: không nên tránh.

Nếu bạn phải loại bỏ nó, có thể là một ý tưởng tốt hơn để cung cấp kiểu dáng thay thế:

Tôi đã thấy khá nhiều mẹo về cách loại bỏ chỉ báo tiêu cự bằng cách sử dụng phác thảo: none hoặc phác thảo: 0. Vui lòng không làm điều này, trừ khi bạn thay thế phác thảo bằng một cái gì đó khác để dễ dàng xem phần tử nào có tiêu điểm bàn phím. Xóa chỉ báo trực quan của tiêu điểm bàn phím sẽ giúp những người phụ thuộc vào điều hướng bàn phím gặp khó khăn khi điều hướng và sử dụng trang web của bạn.

Nguồn: "Không xóa Đường viền khỏi Điều khiển liên kết và biểu mẫu", 365 Berea Street

Nhiêu tai nguyên hơn

• http://outlinenone.com/

Một sử dụng thực tế của giao dịch phác thảo với tính minh bạch. Nếu bạn có phần tử cha có nền, nhưng muốn đường viền của phần tử con trong suốt để nền của phần gốc sẽ hiển thị, bạn phải sử dụng "phác thảo" thay vì "viền". Mặc dù đường viền có thể trong suốt, nó sẽ hiển thị nền của trẻ chứ không phải của cha mẹ.

Nói cách khác, cài đặt này tạo ra hiệu ứng sau:

outline: 7px solid rgba(255, 255, 255, 0.2);

Từ trang web của trường W3

Các thuộc tính viền CSS cho phép bạn chỉ định kiểu và màu của đường viền của một phần tử.

Một phác thảo là một đường được vẽ xung quanh các phần tử (bên ngoài đường viền) để làm cho phần tử "nổi bật".

Thuộc tính tốc ký phác thảo đặt tất cả các thuộc tính phác thảo trong một khai báo.

Các thuộc tính có thể được đặt, là (theo thứ tự): màu phác thảo, kiểu phác thảo, chiều rộng phác thảo.

Nếu một trong các giá trị ở trên bị thiếu, ví dụ: "phác thảo: solid # ff0000;", giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn, nếu có.

Kiểm tra tại đây để biết thêm thông tin: http://webdesign.about.com/od/advifiedcss/a/outline_style.htmlm

Một chút câu hỏi cũ, nhưng đáng nói đến lỗi kết xuất Firefox (vẫn xuất hiện từ ngày 13 tháng 1) trong đó phác thảo sẽ hiển thị bên ngoài tất cả các phần tử con ngay cả khi chúng tràn qua cha mẹ của chúng (thông qua lề âm, bóng hộp , Vân vân.)

Bạn có thể sửa lỗi này bằng:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Thật không may là nó vẫn chưa được sửa. Tôi rất thích phác thảo trong nhiều trường hợp vì chúng không thêm vào kích thước của một phần tử, giúp bạn không phải luôn luôn xem xét độ rộng đường viền khi đặt kích thước của phần tử.

Rốt cuộc, cái nào đơn giản hơn?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Hoặc là:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Nó cũng đáng chú ý, đó W3C của phác thảo là IE của biên giới , vì IE không thực hiện mô hình hộp W3C.

Trong mô hình hộp w3c, đường viền không bao gồm chiều rộng và chiều cao của phần tử. Trong IE nó là bao gồm.

Tôi đã tạo một đoạn mã css / html nhỏ để thấy sự khác biệt giữa cả hai.

outlinetốt hơn là tiết lộ các yếu tố con tiềm năng, đặc biệt là vào một thùng chứa nội tuyến .

borderthích nghi hơn nhiều đối với các yếu tố tạo khối .

Fiddle cho bạn!

Thuộc tính phác thảo trong CSS vẽ một đường bao quanh bên ngoài của một phần tử. Nó tương tự như đường viền ngoại trừ:

• Nó luôn luôn đi xung quanh tất cả các phía, bạn không thể chỉ định cụ thể
• các mặt Nó không phải là một phần của mô hình hộp, vì vậy nó sẽ không ảnh hưởng đến
  vị trí của phần tử hoặc các phần tử lân cận

Nguồn: https://css-tricks.com/almanac/properIES/o/outline/

Như một ví dụ thực tế về việc sử dụng "phác thảo", đường viền chấm mờ theo hệ thống tập trung vào một trang web (ví dụ: nếu bạn tab qua các liên kết) có thể được kiểm soát bằng thuộc tính phác thảo (ít nhất, tôi biết nó có thể trong Firefox , chưa thử các trình duyệt khác).

Một kỹ thuật "thay thế hình ảnh" phổ biến là sử dụng, ví dụ:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

với những điều sau đây trong CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

Vấn đề là khi tiêu điểm đạt đến thẻ, phác thảo sẽ tắt 1000em sang trái. Phác thảo có thể cho phép bạn tắt phác thảo tập trung vào các yếu tố đó.

Tôi tin rằng Thanh công cụ dành cho nhà phát triển IE cũng đang sử dụng một cái gì đó như phác thảo "dưới mui xe" khi làm nổi bật các yếu tố để kiểm tra trong chế độ "chọn". Điều đó cho thấy thực tế là "phác thảo" không chiếm không gian.

nghĩ về phác thảo như một đường viền mà máy chiếu vẽ bên ngoài một thứ gì đó như một đường viền là một đối tượng thực tế xung quanh vật đó.
một phép chiếu có thể dễ dàng chồng chéo nhưng đường viền không cho phép bạn vượt qua.
một số lần khi tôi sử dụng grid+%width, biên giới sẽ thay đổi tỉ lệ trên view cảng, ví dụ như một div với width:100%một mẹ với width:100pxlấp đầy các mẹ hoàn toàn, nhưng khi tôi thêm border:solid 5pxđể div nó làm cho div nhỏ hơn để tạo không gian cho biên giới (mặc dù nó hiếm và có thể giải quyết được!)
nhưng với phác thảo thì không có vấn đề gì vì phác thảo là ảo hơn: D chỉ là một dòng bên ngoài phần tử nhưng vấn đề là nếu bạn không đặt đúng khoảng cách thì nó sẽ trùng với các nội dung khác.

để làm cho nó ngắn gọn:
phác thảo ưu điểm:
nó không gây rối với khoảng cách và vị trí
nhược điểm:
khả năng chồng chéo cao

Sự khác biệt giữa đường viền và đường viền:

Đường viền là một phần của mô hình hộp để nó được tính theo kích thước của phần tử. Phác thảo không phải là một phần của mô hình hộp vì vậy nó không ảnh hưởng đến các yếu tố lân cận.

Bản giới thiệu:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Sao chép từ W3Schools:

Định nghĩa và cách sử dụng

Một phác thảo là một đường được vẽ xung quanh các phần tử (bên ngoài đường viền) để làm cho phần tử "nổi bật".