Градиентный border

[iBars]

Как мне применить к блоку такую рамку?

http://2.firepic.org/2/images/2015-01/10/s8gl0x3s7wky.png

Чтобы была двойная, в два пикселя и с градиентом (внутренняя)

[satantx]

http://jsfiddle.net/satantx/wxpka9r8/

[iBars]

http://jsfiddle.net/satantx/wxpka9r8/

А градиентом рамку внутри сделать нельзя?

[xzarxzes]

 

http://jsfiddle.net/satantx/wxpka9r8/

А градиентом рамку внутри сделать нельзя?

 

 

http://jsfiddle.net/wqsrp3cw/

[Sensei]

Так сойдет? http://jsfiddle.net/8bpjtuhq/

[iBars]

Вот так да, но углы ещё бы удалить

Так сойдет? http://jsfiddle.net/8bpjtuhq/

.block {    width: 100px;    height: 100px;        position: relative;        border: 2px solid #000;        text-align: center;    line-height: 100px;    color: #fff;}.block:before {    content: "";        position: absolute;    top: 0;    left: 0;    bottom: 0; right: 0;        z-index: -1;        background-color: #160919;    border: 2px solid;    border-image: linear-gradient(180deg, #280661, #1c0639) 1;}

http://jsfiddle.net/satantx/wxpka9r8/

А градиентом рамку внутри сделать нельзя?

 

http://jsfiddle.net/wqsrp3cw/

div {    width: 95px;    height: 95px;    background: #160919;    border-width: 2px;    border-style: solid;    border-image: linear-gradient(180deg, #280661, #1c0639) 2 stretch;    box-shadow: 0 0 0 2px #160919;    color: #fff;}

[iBars]

Нашёл реализацию, но... Как её достать?

Выяснил что за заголовок отвечает параметр "data-minetip-title", но как достать полный код этого блока с подсказкой? CSS стили нашёл, а структуру нет

.mw-cite-backlink,.cite-accessibility-label{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}sup.reference{unicode-bidi:-moz-isolate;unicode-bidi:-webkit-isolate;unicode-bidi:isolate}ol.references li:target,sup.reference:target{background-color:#def;background-color:rgba(0,127,255,0.133)}@media print{.mw-cite-backlink{display:none}}.ref-tooltip{position:absolute;margin-top:-29px;font-size:0.875em;z-index:99}.ref-tooltip-text{border:1px solid #AAA;border-radius:2px;background-color:#FFF;box-shadow:0 2px 0 rgba(0,0,0,0.15);margin-top:-14px;margin-left:-21px;padding:0.5em 0.8em;font-size:smaller;min-width:20px;max-width:300px;word-wrap:break-word}.ref-tooltip-flipped > .ref-tooltip-text{margin-top:13px}.ref-tooltip-text > p:first-child{margin-top:0}.ref-tooltip-text > p:last-child{margin-bottom:0}.ref-tooltip-arrow,.ref-tooltip-arrow:before,.ref-tooltip-arrow:after{content:"";position:absolute;bottom:-9px;left:-9px;border:10px solid;border-color:#888 transparent;border-bottom-style:none;width:0;height:0}.ref-tooltip-arrow:before{bottom:-3px;left:-10px;border-color:rgba(0,0,0,0.15) transparent}.ref-tooltip-arrow:after{bottom:1px;left:-9px;border-color:#FFF transparent;border-width:9px}.ref-tooltip-flipped > .ref-tooltip-arrow,.ref-tooltip-flipped > .ref-tooltip-arrow:after{bottom:auto;border-top-style:none;border-bottom-style:solid}.ref-tooltip-flipped > .ref-tooltip-arrow{top:4px}.ref-tooltip-flipped > .ref-tooltip-arrow:before{content:none}.ref-tooltip-flipped > .ref-tooltip-arrow:after{top:1px}.ref-tooltip-options-button{display:inline-block;font:inherit;float:right;-webkit-appearance:none;border:none;outline:none;background:url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/e/e0/Reference_options.png) no-repeat;margin:0.3em 0 0 0.5em;width:16px;height:16px;cursor:pointer}.ref-tooltip-options-button::-moz-focus-inner{border:none}.ref-tooltip-options-button.ref-tooltip-loading{animation:1s linear infinite rotate}.ref-tooltip-text .ref-tooltip-options-button{margin-top:-0.1em;margin-right:-0.3em}.ref-tooltip-options{padding:0.3em 0}.ref-tooltip-actions{margin-top:0.8em;text-align:right}

[klierik]

этот элемент интерфейса называется tooltip. сделать такое можно, на пример, так — http://www.webmasters.by/articles/web-programming/72-create-simple-tooltips-with-css-and-jquery.html