css - 为 DIV 创建有吸引力的边框

Question

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

漂亮的 div 边框演示

请在框中输入光标。您将看到 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 的更多信息。

Answer 2

那是box-shadow在 CSS3 中：

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 等浏览器，您可以右键单击该元素，然后选择“检查元素”以查看应用于它的样式。