为DIV创造有吸引力的边界

Question

我在这里找到了漂亮的div边界：

Demo for nice div border

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

如何创建这样漂亮的边框？还有其他参考吗？

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

<小时/> More info about box-shadow。

Answer 2

CSS3中的box-shadow：

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

---

仅供参考，如果您使用Chrome等浏览器，则可以右键单击该元素，然后选择“检查元素”以查看应用于它的样式。