Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
mardeeva_m
5 / 5 / 2
Регистрация: 02.10.2016
Сообщений: 150
1

Двойная рамка с прозрачностью

22.12.2016, 14:39. Просмотров 212. Ответов 6
Метки нет (Все метки)

Здравствуйте. Моя цель создать прямоугольник с двойной рамкой. Причем 1-я должна быть не прозрачная,а та,которая внутри нее должна быть прозрачная(чтобы был виден цвет рамки и фон в виде крестиков).
Пыталась сделать с помощью
CSS
1
.border{box-shadow: 0 0 0 16px #fff, 0 0 0 17px #000;height: 100px;}
Но не получается сделать второй бордер прозрачным. Подскажите пожалуйста,как быть?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.12.2016, 14:39
Ответы с готовыми решениями:

Двойная рамка
Буквально неделю осваиваю html-> вопросы могут быть некорректны. Нужно...

Двойная рамка
В HTML5 вроде должно работать... Назначаю границе блока свойство double - не...

Ошибка с прозрачностью
Всем привет. Решил попробывать сделать регистрацию во всплывающем окне,но...

Повысить контраст шрифтов на фоне с прозрачностью
Порой приходится прозрачность задавать фону через opacity и вместе с этим...

Двойная ссылка на главную страницу.
У меня каким то образом(мне не известным) на главную страницу ведет двойная...

6
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,920
Записей в блоге: 5
22.12.2016, 15:01 2
CSS
1
box-shadow: 0 0 0 16px rgba(255,255,255,0.3), 0 0 0 17px #000;
0
mardeeva_m
5 / 5 / 2
Регистрация: 02.10.2016
Сообщений: 150
22.12.2016, 15:04  [ТС] 3
Так я тоже пыталась,но цвет все равно черный. Ниже прикладываю свой код.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градиент</title>
<style>
    .main{width: 90%;
        background-image: url(image.jpg);
        height: 500px;
        margin:50px;}
 
    .border{box-shadow: 0 0 0 16px rgba(255,255,255,0.3), 0 0 0 17px #000;
        height: 100px;}
</style>
</head>
<body>
    <div class="main">
        <div class="border">
            
        </div>
    </div>
</body>
</html>
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,920
Записей в блоге: 5
22.12.2016, 15:07 4
Цитата Сообщение от mardeeva_m Посмотреть сообщение
цвет все равно черный
Не, не чёрный... Ближе к коричневому... Давайте проясним... Под прозрачной границей рамки должна быть видна картинка или вторая граница?
0
mardeeva_m
5 / 5 / 2
Регистрация: 02.10.2016
Сообщений: 150
22.12.2016, 15:08  [ТС] 5
Картинка. А с внешнего края рамка зеленого цвета в один пиксель.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,920
Записей в блоге: 5
22.12.2016, 15:18 6
Если так?
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градиент</title>
<style>
    .main{width: 90%;
        background: url(image.jpg) no-repeat;
        height: 500px;
        margin:50px;}
 
    .border{box-shadow:;
        height: 500px;
        box-shadow: 0 0 0 10px rgba(255,255,255,0.5) inset;
        border:1px solid green
    }
</style>
</head>
<body>
    <div class="main">
        <div class="border">
            
        </div>
    </div>
</body>
</html>
0
mardeeva_m
5 / 5 / 2
Регистрация: 02.10.2016
Сообщений: 150
22.12.2016, 15:43  [ТС] 7
Идея хорошая.Спасибо,попробую.
0
22.12.2016, 15:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.12.2016, 15:43

Рамка
Подскажите пожалуйста,как средствами CSS сделать вот такую рамку

рамка
Не знаете ли, как можно сделать рамку не прозрачной если у элемента есть...

Рамка
А как задать рамку для тега &lt;td&gt;, что бы эта ячейка была в рамке. если задать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru