1

我想在我的元素周围放置一个特定的边框，如下所示。我怎么能用css做到这一点。

带边框的按钮

我使用这个 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类，可以吗

4

4 回答 4

2

这是解决方案： 

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

你可以在JSFiddle上看到。

于 2012-11-06T13:42:48.137 回答
1

您可以为每一边指定不同的颜色，使用border-(top|lef|right|bottom)-color 属性来添加高光/阴影。角将相应地斜接。

边框顶部颜色

然后，您可以尝试使用放置在角落的单个 CSS3 边框图像来获得黑色方块。

边框 图片

于 2012-11-06T13:36:03.720 回答
0

对于拖动句柄：虽然您可以使用 CSS 将它们放在那里，但您将无法将事件处理程序附加到它们，也无法在鼠标移过它们时更改鼠标光标。

要获得这两者，您需要将点作为实际元素。有关定位角元素的一种方法，请参见此示例。为 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-06T13:44:45.300 回答
0

您可以尝试使用伪元素：

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 中则相差几个像素。

演示

于 2012-11-06T14:15:21.513 回答