为DIV创建有吸引力的边框 [英] Creating attractive borders for DIV

问题描述

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

I found beautiful div borders here:

演示为漂亮的div边框

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

PLease enter cursor in box. You will see beautiful blue shaded border for div.

如何创建一个漂亮的边框？任何其他参考？

How such a nice border can be created? any other reference?

推荐答案

检查：

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);
}

基本上用于边框的是对焦的盒子阴影。此外，他们在框阴影之间创建一个淡入效果的过渡。

Basically what is used for the border is a box-shadow on focus. Also they create a transition between the box-shadow for a fade-in effect.

Remeber，你可以检查浏览器中的每个元素，该元素的css代码

jsFiddle

---

有关box-shadow 的更多信息。

这篇关于为DIV创建有吸引力的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！