CSS Inset Borders - PullRequest
Новая
       50

CSS Inset Borders

62 голосов
/ 10 декабря 2011

У меня быстрый вопрос по границам CSS.

Мне нужно создать сплошную цветную вставку. Это немного CSS, который я использую:

border: 10px inset rgba(51,153,0,0.65);

К сожалению, это создает трехмерную ребристую границу (игнорируйте квадраты и темное поле описания):

http://dl.dropbox.com/u/12147973/border-current.jpg

Это цель:

http://dl.dropbox.com/u/12147973/border-boal.jpg

Есть идеи?

Ответы [ 12 ]

0 голосов
/ 18 декабря 2014

Я знаю, что это три года, но подумал, что это может быть кому-то полезно.

Идея состоит в том, чтобы использовать селектор: after (или: before) для позиционирования границы внутри родительского элемента. 

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }
0 голосов
/ 06 февраля 2014

Если box-sizing не вариант, другой способ сделать это - просто сделать его дочерним по отношению к элементу размера.

Демо

CSS 

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }


HTML 

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>
Страница:
...