Text border css: Text border using css (border around text)

Leave a Comment / Css / By /

CSS border style

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте стиль для границы:

div {border-style: dotted;}

Подробнее примеры ниже.

Определение и использование

Свойство border-style задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.

Примеры:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

  • border-style: dotted;
    • all four borders are dotted

Значение по умолчанию:none
Inherited:
no
Animatable:no. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object.style.borderStyle=»dotted double»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
border-style1.04.01.01.03.5

Примечание: Значение «скрытый» не поддерживается в IE7 и более ранних версиях. IE8 требует! Doctype. IE9 и последующей поддержки «скрытые».

Синтаксис CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Значения свойств

ЗначениеОписание
noneЗначение по умолчанию.
Не указывает границы
hiddenТак же, как «None», за исключением разрешения пограничного конфликта для элементов таблицы
dottedЗадает пунктирную границу
dashedЗадает пунктирную границу
solidЗадает сплошную границу
doubleЗадает двойную границу
grooveЗадание трехмерной границы с канавкой. Эффект зависит от значения цвета границы
ridgeЗадание трехмерной ребристой границы. Эффект зависит от значения цвета границы
insetЗадает 3D-вставку границы. Эффект зависит от значения цвета границы
outsetЗадание трехмерной границы начала. Эффект зависит от значения цвета границы
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Пунктирная граница:

div {border-style: dashed;}

Пример

Сплошная граница:

div {border-style: solid;}

Пример

Двойная граница:

div {border-style: double;}

Пример

Граница канавки:

div {
    border-style: groove;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница хребта:

div {
    border-style: ridge;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница вставки:

div {
    border-style: inset;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница начала:

div {
    border-style: outset;
    border-color: coral;
    border-width: 7px;
}

Пример

Задайте различные границы для каждой стороны элемента:

p.one {border-style: dotted solid dashed double;}
p. two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

Похожие страницы

CSS Справочник: CSS Border

HTML DOM Справочник: borderStyle Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

border-color ⚡️ HTML и CSS с примерами кода

Свойство

border-color устанавливает цвет границы на разных сторонах элемента.

Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Демо

Каждую сторону можно установить по отдельности, используя border-top-color, border-right-color, border-bottom-color и border-left-color; или с использованием режима записи border-block-start-color, border-block-end-color, border-inline-start-color и border-inline-end-color.

Это свойство является сокращением для следующих свойств CSS:

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
Фон
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис

/* <color> values */
border-color: red;
/* top and bottom | left and right */
border-color: red #f015ca;
/* top | left and right | bottom */
border-color: red rgb(240, 30, 50, 0.
  7) green;
/* top | right | bottom | left */
border-color: red yellow green blue;
/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

Значения

<цвет>
Цвет
transparent
Устанавливает прозрачный цвет.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений
Число значенийРезультат
1Цвет границы будет установлен для всех сторон элемента.
2Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по-умолчанию: Значение свойства color

Применяется ко всем элементам

Спецификации

  • CSS Backgrounds and Borders Module Level 3
  • CSS Logical Properties and Values Level 1
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-color</title>
    <style>
      h2 {
        border-color: red white; /* Цвет границы */
        border-style: solid; /* Стиль границы */
      }
      p {
        border-color: #008a77; /* Цвет границы */
        border-style: solid; /* Стиль границы */
        padding: 5px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <h2>Шоу-бизнес как внутридискретное арпеджио</h2>
    <p>
      Септаккорд, согласно традиционным представлениям,
      иллюстрирует однокомпонентный шоу-бизнес.
  </p>
  </body>
</html>

CSS | Граница шрифта — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 30 июл, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Иногда нам нужно создать текст и добавить контур к тексту. В основном существует два метода создания рамки для шрифтов, перечисленных ниже:

    • Использование свойства text-shadow
    • Использование свойства text-stroke

    Метод 1: Использование свойства text-shadow: Свойство text-shadow используется для добавления границы шрифта или тени к тексту.

    Синтаксис:   

     text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

    Значения свойств:   

    • h-shadow: Устанавливает горизонтальную тень вокруг шрифта.
    • v-shadow: Устанавливает вертикальную тень вокруг шрифта.
    • радиус размытия: Устанавливает радиус размытия вокруг шрифта.
    • цвет: Задает цвет вокруг шрифта.
    • нет: Ничего вокруг шрифта не устанавливается.
    • начальный: Устанавливает для границы шрифта значение по умолчанию.
    • наследование: Он наследует значения свойств от своих родительских значений.

    Возвращаемое значение:

    Возвращает рамку/тень шрифта вокруг текста.
    Пример 1: В этом примере используется свойство text-shadow для создания тени для текста.

    html

    < html >

           

    < head >

         < title >

             Свойство text-shadow CSS

         > title 0086

    < Стиль >

    H2 {

    H2 {

    {

    .

    }

    Стиль >

    .0086  

    < body >

         < h2 >GeeksforGeeks h2 >

    body >

     

    HTML >

    Выход:

    Пример 2: В этом примере свойство text-shadow используется для создания текста с рамками.

    html

    < html >

           

    < head >

         < title >

             Свойство text-shadow CSS

         title >

           

        

         < style >

             . GFG {

                 белый цвет;

                 размер шрифта: 50 пикселей;

                 text-shadow: -1px 1px 0 #000,

    1px 1px 0 #000,

    1px -1px 0 #000,

    -1PX -1px 0 ##000;

    }

    Стиль >

    ,

    .0084 < body >

         < p class = "GFG" >GeeksforGeeks p >

       

    Body >

    HTML >

    3

    0002 Вывод:  
     

    Способ 2. Использование свойства text-stroke: Свойство text-stroke используется для добавления обводки к тексту. Это свойство можно использовать для изменения ширины и цвета текста. Это свойство поддерживается с помощью префикса -webkit-.
    Пример: В этом примере свойство text-stroke используется для создания текста с рамками.

    html

    < html >

           

    < head >

         < title >

             CSS text-stroke property

    Название >

    < стиль >

             . GFG {

                 белый;

                 размер шрифта: 50 пикселей;

                 -webkit-text-stroke-width: 1px;

                 -webkit-text-stroke-color: черный;

             }

         style >

    head >

       

    < body >

         < p class = "GFG" > Geeksforgeeks P >

    Body > . 0086

       

    html >                    

    Output:  
     

    Supported Browser:

    • Google Chrome 4.0
    • Internet Explorer 10.0
    • Firefox 3.5
    • Opera 9.6
    • Safari 4.0

    CSS является основой веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.


    Статьи по теме

    Следующая

    Свойство CSS text-shadow

    Что нового

    Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика в отношении файлов cookie и Политика конфиденциальности

    html — контур шрифта с использованием только CSS

    спросил

    Изменено 3 года, 6 месяцев назад

    Просмотрено 24к раз

    Я работаю над добавлением контура черного шрифта к белому тексту с помощью CSS. Цель — изображение ниже. До сих пор я смог придумать ниже. Есть ли какая-либо другая лучшая практика для более точного соответствия тонкому контуру, показанному на изображении ниже? Спасибо!

     .introText {
семейство шрифтов: «Nunito», без засечек;
-moz-text-fill-color: белый;
-webkit-text-fill-color: белый;
-moz-text-stroke-color: черный;
-webkit-text-stroke-color: черный;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
размер шрифта: 50px;
поле-верх: 20vh;
}
} 
      
    У нас есть идеальное место.

    • html
    • css
    • текст
    • контур

    1

    Один из способов сделать это — использовать text-shadow и перекрыть несколько теней:

     .introText {
   text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
}

    4 раза в данном случае.

    Пример:

     .introText {
        семейство шрифтов: "Nunito", без засечек;
        text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
        белый цвет;
        размер шрифта: 50px;
        поле-верх: 20vh;
      } 
    У нас есть идеальное место.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *