2016-10-20 3 views
-2

Я экспериментирую стилей в CSS, и у меня есть образцы с границами в fiddle, почему прозрачность влияет только на правую и левую стороны, а не на верх и низ в этом коде?Как цвет рамки прозрачный в css работает?

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.large { 
 
    font-size: 2em; 
 
} 
 
div { 
 
    width: 3.5em; 
 
    height: 5em; 
 
    border-style: solid; 
 
    border-width: 50px 20px; 
 
    border-color: red transparent; 
 
}
<div class="large"></div>

+0

https://developer.mozilla.org/en/docs/Web/CSS/border-color –

+0

Почему для downvote? делает прозрачную работу только для правой и левой? – learningjavascriptks

+0

Для полного отсутствия исследований ... это базовая стенограмма CSS, которую вы могли бы найти с помощью базового поиска. –

ответ

0

Синтаксис CSS выглядит так:

границы: [наверх], [вправо], [нижний], [влево];

в пограничном цвете: красный прозрачный; вы указали, что верхняя часть должна быть прочитана, право должно быть прозрачным, а поскольку другие 2 значения пустые, они копируют себя.

1

Это потому, что у вас есть параметры для пограничного цвета. Когда у вас есть 2 параметра ... первый - для TOP и BOTTOM, а второй для LEFT и RIGHT.

Если у вас есть 4 параметра будет: первых - верхний второй - правый третьего - нижний четвёртым - левый

В вашем случае первого один красный и это влияет на верхнем и нижних, а второй один прозрачен, и он влияет на левый и правый.

+0

ohh, хорошо, представлял себя css, получил его сейчас, хотя я не ожидал результата в виде треугольника. – learningjavascriptks

Смежные вопросы