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

しかし、画像のように境界線を表示したい。これは可能ですか？

要素の周りにこれらの 8 つの正方形を配置したいと思います。

$('#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を使用してそこに配置することはできますが、イベント ハンドラーをそれらにアタッチしたり、マウス カーソルがそれらの上に移動したときにマウス カーソルを変更したりすることはできません。

これらの両方を取得するには、ドットが実際の要素である必要があります。コーナー要素を配置する 1 つの方法については、この例を参照してください。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 に答える