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

Leave a Comment / Css / By /

Свойство border-bottom-style | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-bottom-style устанавливает стиль нижней границы.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
border-bottom-style1.01.09.21.05.512.0

Значение «hidden» не поддерживается в IE7 и более ранних версиях, для IE8 требуется элемент !DOCTYPE.

CSS синтаксис:

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

JavaScript синтаксис:

object.style.borderBottomStyle = "dotted"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Стиль границ.</title>
<style> 
.primer {
border :5px red; /* задаём ширину всех границ 5px и цвет - красный */
border-bottom-style :dotted; /* задаём для нижней границы точечный стиль */
border-left-style :solid; /* задаём для левой границы сплошной стиль */
border-right-style:double; /* задаём для правой границы двойной стиль */
border-top-style:dashed; /* задаём для верхней границы пунктирный стиль */
text-align:center; /* задаём выравнивание текста по центру */
width:150px; /* задаём ширину блока */
}
</style>
</head>
<body>
<p class = "primer">Пример указания стиля для границ</p>
</body>
</html>
Пример указания стиля для границ. CSS свойства

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 {

    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 >

    9

    > 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.


    Следующий

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

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

    Что нового

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

    Как установить границу шрифта в CSS

    html

    4 месяца назад

    от Sharqa Hameed

    С помощью CSS вы можете стилизовать шрифты несколькими способами.

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

    В этом руководстве мы узнаем об установке границы шрифта в CSS.

    Как установить границу шрифта в CSS?

    В CSS мы можем использовать следующие свойства для установки границы шрифта:

    • -webkit-text-stroke свойство
    • свойство text-shadow

    Итак, приступим.

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

    Свойство text-stroke специально введено для установки границы шрифта. Однако свойство text-stroke не включено в стандарты W3c. Вот почему ключевое слово « -webkit » добавляется в него для выполнения указанного функционала. Свойство -webkit-text-работает в браузерах Safari, Google Chrome и Firefox.

    Посмотрите следующий пример, чтобы узнать больше об установке границы шрифта с помощью свойства -webkit-text-stroke.

    Пример

    Вот текст, для которого мы хотим установить границу:

    В наш файл HTML мы добавили текст в качестве заголовка с помощью тега «

    » и разместили его в тело:

    HTML

    Лучший образовательный веб-сайт

     

    Чтобы установить границу вокруг шрифта, мы будем использовать свойство CSS « -webkit-text-stroke » с «

    30px

    » и придайте ей цвет « красный ». Мы также укажем синий цвет текста, используя свойство « color »:

    CSS

    h3 {
    -webkit-text-stroke: 1px red;
    цвет: синий;
    }

     

    Теперь сохраним код и откроем HTML-файл в браузере:

    Видно, что граница шрифта успешно применена с помощью свойства -webkit-text-stroke и добавленный текст выглядит стильно.

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

    Итак, давайте применим это свойство CSS к тому же тексту, чтобы установить границу вокруг него.

    Пример

    Здесь мы сделаем красную тень « 1px » с каждой стороны, используя свойство text-shadow, « -1px 0px 0px » зададим тень слева, « 1px 0px 0px "задает тень справа, " 0px -1px 0px " задает тень верхней стороны и " 0px 11px 0px " задает тень нижней стороны:

    CSS

    h3 {
    text-shadow:
    -1px 0px 0px красный,
    1px 0px 0px красный,
    0px -1px 0px красный,
    0px 1px 0px красный;цвет: синий;
    }

     

    Вывод

    Мы собрали различные подходы к установке границ шрифта в CSS.

    Заключение

    Чтобы установить границу шрифта в CSS, можно использовать свойство « -webkit-text-stroke » и свойство « text-shadow », чтобы добавить границу шрифта определенным образом.

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

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