为DIV创造有吸引力的边界

Question

我在这里找到了美丽的div边界:

为漂亮的div边界演示

PLease在框中输入光标.div会看到美丽的蓝色阴影边框.

如何创建这么好的边框？还有其他参考吗？

Answer 1

检查一下:

input
{
    border-radius: .2em;
    border: 1px solid #cccccc;

    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

input:focus
{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px     rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

基本上用于边框的是焦点上的盒子阴影.他们还在盒子阴影之间创建了一个渐变效果的过渡.

请记住,您可以检查浏览器中的每个元素,从而可以查看元素的css代码

的jsfiddle

有关box-shadow的更多信息.