如何在元素周圍設置特定的邊框？

我想把下面的特定邊框放在我的元素周圍。我該如何用CSS來做到這一點。如何在元素周圍設置特定的邊框？

Button with border

我使用這個CSS的顯示元素周圍邊框：

.ui-selected { 
    -moz-box-shadow: 0 0 1px 1px black; 
    -webkit-box-shadow: 0 0 1px 1px black; 
    box-shadow: 0 0 1px 1px black; 
}

但我想說明的邊界一樣的形象。這可能嗎？

我想把這八個正方形放在一個元素周圍。

我使用$（'＃element'）。addClass（'ui-selected'）添加和$（'＃element'）。removeClass（'ui-selected'）以刪除。

我想CSS類，是有可能

來源

2012-11-06 AKZ

你要搶，手柄是有作爲，或者只是暗/白色邊框？ –

只需要邊框屬性就可以把握把手。 – techfoobar

我想把這六個方塊放在一個元素周圍 – AKZ

這裏是解決方案：

box-shadow: 2px 2px 1px 0 #666; 
border-top: 1px solid white; 
border-left: 1px solid white;

你可以看到JSFiddle。

來源

2012-11-06 13:42:48

@AKZ：請看我用方塊的更新：http://jsfiddle.net/vGUre/1/ –

你仍然可以改進css/html定義類來減少CSS。 –

謝謝我怎麼能減少它...可以做到這一點與一個CSS declration – AKZ

您可以指定不同的顏色每邊，用border-（頂部| LEF |右|底部）-color屬性來增加亮點/陰影。角落將相應地減速。

Border-top-color

然後您可以嘗試使用放置在角落個人CSS3邊框圖像acheive黑色方塊。

來源

2012-11-06 13:36:03

對於拖動手柄：儘管您可以使用place them there with CSS，但您無法將事件處理程序附加到它們，也不能在鼠標移過它們時更改它們。

爲了得到這兩個，你需要點是實際的元素。請參閱this example瞭解定位角落元素的一種方法。緩存StackOverflow的後代（在我的網站已關閉萬一）：

<html lang="en"><head> 
    <title>Positioning Images</title> 
    <style type="text/css"> 
    .compass   { position:relative } 

    .compass .north, 
    .compass .south, 
    .compass .east, 
    .compass .west, 
    .compass .center { width:15px; height:15px; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-8px; cursor:pointer } 

    .compass .north { top:0; margin-top:0 } 
    .compass .south { bottom:0; top:auto; margin-top:0 } 
    .compass .east { right:0; left:auto; margin-left:0 } 
    .compass .west { left:0; margin-left:0 } 
    </style> 
</head><body> 
    <div class="compass"> 
    <!-- your element here --> 
    <img class="north west" src="c1.png" alt="resize"> 
    <img class="north east" src="c2.png" alt="resize"> 
    <img class="south east" src="c3.png" alt="resize"> 
    <img class="south west" src="c4.png" alt="resize"> 
    <img class="north" src="up.png" alt="resize"> 
    <img class="south" src="dn.png" alt="resize"> 
    <img class="east" src="rt.png" alt="resize"> 
    <img class="west" src="lt.png" alt="resize"> 
    </div> 
</body></html>

來源

2012-11-06 13:44:45 Phrogz

你可以與僞元素的實驗：

div:after { 
    content: '\25A0\25A0\25A0 \25A0\25A0\25A0 \25A0\25A0\25A0'; 
    position: absolute; 
    top: -37px; 
    left: -5px; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    line-height: 75px; 
    letter-spacing: 67px; 

}

這看起來在Webkit的好，而且是幾個像素關閉在Firefox中。

Demo

來源

2012-11-06 14:15:21 bookcasey

如何在元素周圍設置特定的邊框？

回答

相關問題