Thuộc tính trong suốt của đường viền màu

Question

Tôi đã tìm thấy ví dụ thú vị này về việc sử dụng thuộc tính transparent của thuộc tính transparent để tạo mũi tên.
Tôi hiểu cách đường viền được vẽ và cách một phần tử trống có một đường viền đặt bên có thể giúp đạt được hiệu ứng mũi tên, nhưng điều khiến tôi đi lang thang trong ví dụ này là sử dụng minh bạch.
Hãy nhìn vào mã đơn giản này:

<div id="daniel"></div> 

CSS:

#daniel{ 
border-color: rgba(111,111,111,0.2) transparent transparent; 
border-style: solid; 
border-width: 15px; 
position: absolute; 
} 

Với mã này tôi nhận được một mũi tên trỏ xuống. (JSFIDDLE)

Chỉ với một minh bạch, tôi nhận được hiệu ứng hourglass. (JSFIDDLE):

border-color: rgba(111,111,111,0.2) transparent; 

không là gì confuses me biết những gì border-{side}transparent đề cập đến trong các thuộc tính viết tắt này.

Hy vọng điều đó có ý nghĩa.
Bất kỳ trợ giúp nào được đánh giá cao.

cám ơn;)

Answer 1

có một quy tắc đơn giản cho thứ tự mà các bên xuất hiện trong ký hiệu viết tắt như: rắc rối: Top Right dưới Left

nếu bạn có ít hơn 4 lập luận, những người mất tích được lấp đầy với các quy tắc sau (tùy thuộc vào có bao nhiêu đối số đang thiếu):

left = right 
bottom = top 
right = top 

như vậy trong ví dụ của bạn

border-color: rgba(111,111,111,0.2) transparent transparent; 

ac cording các quy tắc, chúng tôi có

top=rgba 
right=transparent 
bottom=transparent 
left=right=transparent 

tương tự trong ví dụ khác:

border-color: rgba(111,111,111,0.2) transparent; 

chúng tôi nhận được sau

top=rgba 
right=transparent 
bottom=top=rgba 
left=right=transparent 

Answer 2

Những gì bạn cần phải biết được border-color:red black blue; sẽ làm cho màu đỏ biên giới hàng đầu, dưới cùng một màu xanh và bên trái và cái đúng đen, và giải thích lý do tại sao bạn nhận được một mũi tên trong ví dụ đầu tiên của bạn:

• Lên trên màu
• mọi thứ khác trong suốt

Nó cũng giải thích ví dụ 2:

• Lên trên & đáy màu
• trái & đúng trong suốt

Ví dụ

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example": 
#example p { 
    border-color: red blue green; 
    border-style: solid; 
} 

Source

Đối với một chi tiết giải thích về tác dụng tam giác CSS, xem: How does this CSS triangle shape work?

Answer 3

Đó đề cập đến phong cách Border.Nhìn vào thông số kỹ thuật từ w3c

Answer 4

bạn

ví dụ đầu tiên

border-color: rgba(111,111,111,0.2) transparent transparent; 

Xác định

first rgba border= is a top border; 
second transparent border = are left & right border; 
third transparent border= are bottom border; 

kiểm tra ví dụ này http://jsfiddle.net/hDpnw/8/

&

bạn

ví dụ thứ hai

border-color: rgba(111,111,111,0.2) transparent; 

Xác định

rgba border= are top & bottom border; 
transparent border = are left & right border; 

kiểm tra ví dụ này http://jsfiddle.net/hDpnw/7/