Css - сместить текст на бордюр

@53ifbb · Регистрация: 01.03.2016

Студворк — интернет-сервис помощи студентам

Ни как не могу до конца запомнить весь этот css...(
Нужно срочно сделать блок div с бордюром и груглыми углами, а заголовок блока болжен быть написан поверх верхней линии и по центру.
А по хорошему нужен красивый бордюр как на http://jqueryui.com в самом низу, но вокруг всего блока

По братски накидайте что нибудь и текстом опишите как это написать

@dzendev · 23.03.2016, 21:12

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>По братски</title>
    <link rel="stylesheet" href="">
    <style>
        div.block{
            border: 2px solid black;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            width: 500px;
            margin: 0 auto;
            padding: 10px;
            background: #f0f0f0;
        }
        .block h1{text-align: center;}
    </style>
</head>
<body>
    <div class="block">
        <h1>Заголовок по центру</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium delectus similique voluptate sapiente voluptates non, ipsum ut? Tenetur explicabo quis ullam, quas sapiente labore officiis, architecto, possimus consectetur quae molestias.</p>
    </div>
</body>
</html>

Сообщение от 53ifbb

Ни как не могу до конца запомнить весь этот css...(

Помнить не надо всё, надо знать где это находится в справочнике.
htmlbook.ru

@53ifbb · 23.03.2016, 22:57 **[ТС]**

dzendev, да Вы плохо читали содержание темы.

Смог нарисовать почти то что представил

Название: block2.png
Просмотров: 29

Размер: 1.7 Кб

Как нарисовать, бордюр что на картинке ??

@dzendev · 24.03.2016, 12:44

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>По братски</title>
<style>
    body{background: #888888;}
    .b1{
        border: 1px solid #000;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        margin: 20px auto;
        position: relative;
    }
    .b2{
        border: 1px solid #DBDBDB;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        padding: 10px 20px;
        background: #2F2F2F;
        color: white;
 
    }
    .boxshadow{
        position: relative;
        border: 1px solid #AAAAAA;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        margin: 20px auto;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        background: #2F2F2F;
        color: white;
        padding: 10px 20px;
        box-sizing: border-box;
    }
    .b1 .header, .boxshadow .header{
        text-align: center;
        font-size: 18px;
        width: 100%;
        line-height: 1em;
        position: absolute;
        margin-left: -20px;
    }
    .b1 .header span, .boxshadow .header span{
        background: #2F2F2F;
        position:relative;
        top:-25px;
        padding: 4px 14px;
        display: inline-block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
</style>
</head>
<body>
 
<div class="b1">
    <div class="b2">
        <div class="header"><span>Верхний блок</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="b1" style="border-bottom-color: #DBDBDB;border-right-color: #DBDBDB;">
    <div class="b2" style="border-bottom-color: #000;border-right-color: #000;">
        <div class="header"><span>Плохо смотрится</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="b1" style="border-radius:0;border-bottom-color: #DBDBDB;border-right-color: #DBDBDB;">
    <div class="b2" style="border-radius:0;border-bottom-color: #000;border-right-color: #000;">
        <div class="header"><span>Уже лучше смотрится</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="boxshadow">
    <div class="header"><span>Можно так</span></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. lias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias mpedit doloremque deserunt.</p>
</div>
<div class="b1" style="background: #000;border:0;width: 499px;">
    <div class="b2" style="position: relative;top:1px;left:1px;-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);-moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);">
        <div class="header"><span>А это уже самое то</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
</body>
</html>

@Shakalaka · 24.03.2016, 13:14

53ifbb, для первой картинки

HTML5
1
2
3
4
<fieldset>
<legend>border</legend>
  <div>text text text</div>
</fieldset>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div{
  width:300px;
  height:200px;
}
fieldset{
  display:inline-block;
  background:#444;
  border-radius:10px;
  border-style:solid;
  border-color:#121212;
}
legend{
  text-align:center;
  padding:0 10px;
  text-transform:uppercase;
  color:#888;
}

https://jsfiddle.net/shakalaka/shqwLkLz/
Для второй - border-image

@53ifbb · 24.03.2016, 20:28 **[ТС]**

Shakalaka, первую я сам нарисовал)

Добавлено через 6 часов 21 минуту
Shakalaka, в вашем примере нет ни первого вариант ни второго. Бордюр из 2 цветов состоит!!

dzendev, Вы знаете как сделать бордюр строго как на 2 изображении ? В вашем примере нет такого блока. Я сам знаю как написать все варианты которые вы представили. Если знаете как сделать блок строго по как на изобр. с 2 цветами, напишите пожалуйста, можно без кода, просто словами...

Строго (читать сверху вниз, слева на право): Верх -> бел-черный, низ -> черный-белый, лево -> черный белый, право -> белый-черный

Добавлено через 1 минуту
п.с. Нужно на чистом СSS3! Без изображений

@dzendev · 24.03.2016, 20:49

Вы сами себе противоречите

Сообщение от 53ifbb

Ни как не могу до конца запомнить весь этот css...(

Сообщение от 53ifbb

. Я сам знаю как написать все варианты которые вы представили.

@53ifbb · 24.03.2016, 22:12 **[ТС]**

dzendev, я не противоречу! Тот вариан что мне нужен я не помню как написать...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594

	Css - сместить текст на бордюр 23.03.2016, 18:26. Показов 2193. Ответов 7 Метки нет (Все метки) Ни как не могу до конца запомнить весь этот css...( Нужно срочно сделать блок div с бордюром и груглыми углами, а заголовок блока болжен быть написан поверх верхней линии и по центру. А по хорошему нужен красивый бордюр как на http://jqueryui.com в самом низу, но вокруг всего блока По братски накидайте что нибудь и текстом опишите как это написать 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	23.03.2016, 22:57 [ТС]
	dzendev, да Вы плохо читали содержание темы. Смог нарисовать почти то что представил Как нарисовать, бордюр что на картинке ?? 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	24.03.2016, 20:28 [ТС]
	Shakalaka, первую я сам нарисовал) Добавлено через 6 часов 21 минуту Shakalaka, в вашем примере нет ни первого вариант ни второго. Бордюр из 2 цветов состоит!! dzendev, Вы знаете как сделать бордюр строго как на 2 изображении ? В вашем примере нет такого блока. Я сам знаю как написать все варианты которые вы представили. Если знаете как сделать блок строго по как на изобр. с 2 цветами, напишите пожалуйста, можно без кода, просто словами... Строго (читать сверху вниз, слева на право): Верх -> бел-черный, низ -> черный-белый, лево -> черный белый, право -> белый-черный Добавлено через 1 минуту п.с. Нужно на чистом СSS3! Без изображений 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	24.03.2016, 22:12 [ТС]
	dzendev, я не противоречу! Тот вариан что мне нужен я не помню как написать... 0