Что касается внешнего интерфейса, ежедневная разработка полна проблем и развлечений, и мы делаем все возможное, чтобы улучшить взаимодействие с пользователем в странных условиях. В этой статье будут перечислены некоторые нишевые требования, возникающие при фронтенд-разработке, и приведены решения для справки.
1. Измените значок жеста мыши
Многие детские туфли могли использовать:
cursor: pointer | wait | hand | text | move | not-allowed;Тем не менее, он также поддерживает пользовательское изображение, вы знаете?
cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;На следующем рисунке показана поддержка каждого браузера:
Не забудьте добавить общие курсоры в конце после определения пользовательских курсоров, если курсоры, определенные этими URL-адресами, нельзя использовать.
Подробная инструкция здесь:
1.Необязательное значение для курсора css (различные стили мыши)
2.Using URL values for the cursor property
Два, коробчатая тень, трехсторонняя тень
box-shadowВсе знакомы с ним, мы обычно используем его так:
box-shadow: h-shadow v-shadow blur spread color inset;Но как настроить трехстороннюю тень? Пожалуйста, не игнорируйте мозговую дыру дизайнера🙈:
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}Может быть, вы можете использовать его, пожалуйста, обратитесь к:CSS box-shadow on three sides of a div?
3. Супер простой в использовании currentColor
Давайте сначала возьмем пример, html-код:
<a href="##" class="link"><i class="icon"></i>返回</a>css-код:
.icon {
display: inline-block;
width: 16px;
height: 20px;
background-image: url(http:jartto.wang/test.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
background-position: 0 0;
}
.link:hover {
color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
}currentColor означает "цвет текста, унаследованный текущей меткой"
Для получения дополнительной информации см.:CSS3 Super High School School Легко использовать переменные CSS
В-четвертых, как изменить цвет изображений png
Большинство веб-страниц используют прозрачные изображения.pngФормат, но если однажды продакт-менеджер сказал, можно ли изменить цвет этой иконки на красный, а дизайнер не может вас поддержать, что делать?
1-й: заново изобрести себяpsНажмите на картинку, измените цвет;
Во-вторых: только наsvgЭй, сделай этоicon font;
Вот, давайте поговорим о третьем способе, вы можете попробовать, хорошо это или нет!
.icon {
display: inline-block;
width: 20px;
height: 20px;
overflow: hidden;
}
.icon-del {
background: url(delete.png) no-repeat center;
}
.icon > .icon {
position: relative;
left: -20px;
border-right: 20px solid transparent; /*下文注意点 2 有解释*/
-webkit-filter: drop-shadow(20px 0);
filter: drop-shadow(20px 0);
}html-код:
<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>Несколько замечаний:
1. Для прозрачного фонаpngДля маленьких значков, если мы применяем проекцию без размытия, это эквивалентно созданию маленького значка другого цвета;
2. ВchromeВ браузере, если тело элемента каким-либо образом не видно на странице, егоdrop-shadowневидим. Даже если физическая часть1pxвидно, тоdrop-shadowполностью видно.
css3фильтрfilterсерединаdrop-shadow,drop-shadowФильтры могут добавлять тени к элементам или непрозрачным областям изображения.Для получения дополнительной информации см.:
1.CSS технология присвоения произвольного цвета маленьким иконкам в формате PNG
2.демо демо
5. вх и вв
Относительно ширины области просмотра. Окна просмотра делятся на100Единицыvw,vhТо же самое справедливо.Я обычно использую его, когда заставляю контейнер занимать весь экран, например:
.box{
height: calc(100vh - 50px);
}Высота области просмотра вычитается из фиксированной области заголовка, а оставшаяся высота задается контейнером. Конечно, мы также можем использовать его для установки размера следующим образом:
h1 {
font-size: 8vw;
}Если ширина области просмотра200mm, тогда размер шрифта в коде выше будет h1 элемент16mm, то есть (8x200)/100
Примечательно,lessнужно добавить～
min-height: ~"calc(100vh - 68px)";Кроме того, есть некоторыеch,vmax,vminНедвижимость ждет, когда вы расширитесь. Чтобы узнать подробности, перейдите по ссылке:css справочник по vw
6. Как убрать желтый фон хромированного ввода
Когда мы делаем целевую страницу, вchromeсерединаinputОн принесет автозаполнение желтого фона, что сильно влияет на внешний вид. Многие сайты не имеют с этим дело, но с этим не так уж сложно справиться. Здесь может быть отражена ваша ценность, как высококлассного фронтенда.Решения заключаются в следующем:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}Конечно, вы также можете использовать второй вариант, как показано ниже:
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes autofill {
to {
color: #fff;
background: transparent;
}
}Для получения дополнительной информации перейдите по ссылке:
1.Автозаполнение формы Chrome удалить входное желтое фоновое решение
2.Removing input background colour for Chrome autocomplete
7. Установите шрифты размером менее 12 пикселей в Chrome
Этот вид небольшого изменения шрифта, большая часть которого должна соответствовать потребностям дизайнеров, потому что маленький размер выглядит деликатно.
ant-checkbox-wrapper {
cursor: pointer;
font-size: 10px;
display: inline-block;
-webkit-text-size-adjust: none; // 不支持
transform: scale(0.9);
}Восемь, граница 0,5px, как работать
Текущие методы примерно таковы:
1. Используйте градиентыlinear-gradientработать, но вам необходимо обратить внимание на префикс совместимости браузера;
.div::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}2. Масштабscaleиметь дело с:
div::after{
content: "";
display: block;
position: absolute;
left: -50%;
bottom: 0;
width: 200%;
height: 1px;
background: #c3c3c3;
-webkit-transform: scale(0.5);
}3. Используйтеbackground-imageа такжеcss3Jiugongge разрез
.bd-t::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1px solid transparent;
/* 下面用 stretch 和 round 都可以 */
border-image: url('pic.png') 2 1 1 1 stretch;
-webkit-border-image: url('pic.png') 2 1 1 1 stretch;
}Для более глубокого понимания, пожалуйста, обратитесь к:
1.Тонкая линия 0,5px с использованием css3
2.Внедрение границы 0,5px на мобильных страницах
Девять, градиент цвета границы
border-color:red green blue pink;Свойство "border-width" не действует, если используется отдельно. Пожалуйста, используйте свойство "border-style", чтобы сначала установить границу.
Десять, css3 рисует маленькие стрелки
Здесь рекомендуются два метода:
Во-первых, через границу для достижения
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}Во-вторых, пэчворк (псевдокласс или элемент) будетdivскрыть стороны или настройкиz-index, а затем поверните его в подходящее положение.
div {
position: absolute;
bottom: -2px;
left: 7px;
width: 10px;
height: 10px;
transform: rotate(-45deg);
z-index: -1; /* 放在容器后，被遮盖住*/
}Это относительно просто, поэтому я не буду вдаваться в подробности.
11. Интересная тень
Использование заключается в следующем:
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
filter:drop-shadow(5px 5px 10px black)Тень в фильтре фильтра CSS3, фильтр тени может добавить тень к непрозрачной области элемента или изображения.
Выше был упомянут один сценарий использования, а здесь я хочу рассказать о другом, а именно о маленьких пузырьках, сделанных лоскутным шитьем.Если пузырькам нужны тени, пожалуйста, используйтеdrop-shadowзаменитьbox-shadow.
Для получения более подробной информации см.:Фильтр drop-shadow применяется иначе, чем box-shadow.
12. Измените полосу прокрутки браузера по умолчанию.
Иногда некоторые неожиданные полосы прокрутки делают страницу очень неловкой. В это время вы также можете принудительно украсить ее. Код ссылки выглядит следующим образом:
/*滚动条 start*/
::-webkit-scrollbar {
width: 1px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// background-color:rgba(7, 170, 247, 0.7);
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}Для получения подробной информации см.:Изменить стиль полосы прокрутки браузера по умолчанию
Тринадцать, ошибки заполнителя сафари
встретились в проектеinputизplaceholderсуществуетsafariПроблема установки высоты строки ниже решается следующим образом:
1. ИспользуйтеpaddingСоставьте текст подсказки, еслиfont-size:14px, UIвысота40px, мы можем установитьheight：14px,padding:13px 0;
2. Используйтеline-height:1px;
3. Используйтеvertical-align: middle;
Добавьте один: Safari для написания хака, т.е. [;line-height:1;]
Для получения подробной информации см.:Заполнитель ввода недопустим для установки высоты строки в сафари.
14. Резюме
Это все странные проблемы, с которыми я сталкивался в своей ежедневной разработке.Оглядываясь назад, это было на самом деле довольно интересно, поэтому я разобрался с ними. Что интересного в разработке без каких-либо проблем в повседневной разработке.