Question

我想在我的元素周围放置一个特定的边框。我怎么能用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类，是否可能

Answer 1

以下是解决方案：

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

您可以在JSFiddle上看到。

Answer 2

您可以为每一面指定不同的颜色，使用border-（top | lef | right | bottom）-color属性添加高光/阴影。角落将相应减少。

Border-top-color

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

border images

Answer 3

对于拖动句柄：尽管你可以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>

Answer 4

您可以尝试使用伪元素：

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

如何在元素周围设置特定边框？

4 个答案: