Как добавить обводку для стилей HTML в JavaScript? - PullRequest
Новая
       17

Как добавить обводку для стилей HTML в JavaScript?

0 голосов
/ 08 декабря 2018

У меня есть виджет блокировки экрана, который использует файл .js для стилизации элемента часов.Проблема в том, что в зависимости от обоев цвет этих часов иногда трудно читается (черный на темном фоне).Я нашел элемент, который меняет цвет текста часов, но этого недостаточно.Я хочу иметь возможность добавить штрих к нему, чтобы он имел толщину и двойные цвета.Таким образом, будет ясно, что читать любой фон.

Фактический элемент таков: 

var elements = {
    "zclock": {
        "z-index": 2,
        "color": "gray",    <--- This changes color of clock text
        "webkit-text-stroke-width": "3px",
        "font-family": "sanfranlight",
        "position": "absolute",
        "font-size": "51px",
        "top": 0,
        "left": 1,
        "width": "119px",
        "text-align": "right",
        "font-weight": "100"
    },
    <omitted rest>
    };

Я пытался использовать что-то под названием -webkit-text-stroke-width, но это не сработало.Возможно, я ошибся, потому что в онлайн-примерах на него ссылаются только на CSS-файлы.

Я хочу получить такой эффект (или аналогичный) enter image description here

Это для iPhone / iOS, так что это будет то, что использует Safari.

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Возможно, вы используете IE 11, и -webkit-text-stroke не работает, так как он не поддерживается: см. Здесь

Вместо этого вы можете попробовать text-shadow. См. Поддерживаемые браузеры здесь

Это действительно хорошо объяснено здесь

0 голосов
/ 08 декабря 2018

Привет,

Вы можете попытаться добавить свойство "-webkit-text-stroke-color" и к этому объекту, и это может увеличить "font-weight".Для свойства "webkit-text-stroke-width" в вашем коде может также потребоваться начальный символ "-".

Пример на чистом CSS / HTML 

.element{
    color: #fff;
    font-weight: 700;
    font-size: 51px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
}

См. Также -webkit-text-stroke-width и -webkit-text-stroke в MDN.

С уважением, Сэм.

...