Ниже приведены некоторые часто используемые и интересные навыки CSS, я надеюсь, вы сможете собрать их, чтобы сократить время поиска информации.
треугольник
Самая распространенная форма. Вырежьте карту, ее нет.
/** 正三角 */
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 40px 25px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
}
/** 倒三角 */
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: rgb(245, 129, 127) transparent transparent transparent;
}
Эффект пунктирной линии
.dotted-line{
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}
Свойство стиля границы, которое поставляется с css, имеет вид dotted/dashed Эффект слишком плотный и не соответствует дизайну пользовательского интерфейса.
Цвет и расстояние между конкретными пунктирными линиями можно настроить с помощью фона полос, созданного с помощью повторяющегося линейного градиента.
Текст за многоточием
однострочный текст
.single-ellipsis{
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
многострочный текст
.multiline-ellipsis {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; //需要显示的行数
overflow: hidden;
text-overflow: ellipsis;
}
расширение: -webkit-line-clamp — это неподдерживаемое свойство WebKit, которого нет в проекте спецификации CSS.
Для достижения этого эффекта необходимо объединить другие внешние свойства WebKit. Общие свойства связывания:
- display: -webkit-box; Свойство, которое необходимо комбинировать для отображения объекта в виде гибкой блочной модели.
- -webkit-box-orient Свойство, которое необходимо объединить, чтобы установить или получить расположение дочерних элементов объекта flexbox.
- Text-переполнение, можно использовать в случае нескольких линий текста, с эллипсой «...» скрытый текст из диапазона.
Совместимость с браузером:
Лента новостей
HTML-структура
<div class="timeline-content">
<div v-for='(item, index) in timeLine' :key='index' class="time-line">
<div :class="`state-${item.state} state-icon`"></div>
<div class="timeline-title">{{item.title}}</div>
</div>
</div>
css-стиль
/** 时间轴 */
.timeline-content{
display: flex;
.time-line{
padding: 10px 10px 10px 20px;
position: relative;
&::before{
content: '';
height: 1px;
width: calc(100% - 34px);
background: #EBEBEB;
position: absolute;
left: 24px;
top: 0;
}
}
.state-icon{
width: 20px;
height: 20px;
position: absolute;
top: -12px;
left: 0;
}
.state-1{
background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat;
background-size: cover;
}
.state-2{
background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat;
background-size: cover;
}
.state-3{
background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat;
background-size: cover;
}
}
Функция calc() используется для вычисления значения свойства css.
Применение:
/** 属性：calc（expression）*/
宽度：calc（100％ - 34px）;
В дополнение к вычитанию вы также можете использовать + (добавление), / (разделение) и * (умножение). Но обратите внимание, что:
Примечание: операторы + и - требуют пробела между оператором и значением. Например, это будет calc (50% -8px), интерпретируемое как процент, за которым следует отрицательная длина пикселя. Только - когда между 8px есть пробелы, можно исправить вычитание: calc (50% - 8px) Пробелы при умножении или делении не работают, рекомендуется обращать внимание при чтении.
Совместимость с браузером:
полоса прокрутки
.scroll-container {
height: 250px;
border: 1px solid #ddd;
padding: 15px;
overflow: auto;
.row {
margin: 0;
line-height: 1.5;
}
&::-webkit-scrollbar {
width: 8px;
background: white;
}
&::-webkit-scrollbar-corner, /* 滚动条角落 */
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
border-radius: 4px;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
/* 滚动条轨道 */
background-color: rgba(180, 160, 120, 0.1);
box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
&::-webkit-scrollbar-thumb {
/* 滚动条手柄 */
background-color: #00adb5;
}
}
купонный эффект
.coupon{
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}
эффект тени
// 三角形阴影
.shadow-triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
filter:drop-shadow(10px 0px 10px rgba(238, 125, 55,0.5));
}
// 缺圆投影
.circle-square{
width:100px;
height:50px;
line-height: 50px;
background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
}
// 气泡阴影
.tip {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid rgb(245, 129, 127);
border-radius: 4px;
position: relative;
background-color: #fff;
filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
&::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
position: absolute;
top: -11px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
}
Равновысокая компоновка
Нет ничего, с чем не мог бы справиться флекс.
.parent{
display: flex;
}
Если одна линия не подходит, ее можно свернуть.
.parent{
flex-wrap: wrap;
}
Суммировать
Выше приведены некоторые статические стили и еще несколько интересных динамических стилей. Я надеюсь, что у меня будет возможность поделиться с вами ~ Если у вас есть более интересные навыки CSS, пожалуйста, оставьте сообщение в области комментариев ~