0

cssとjqueryを勉強中です。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
 border-style:solid;
 border-color:red;
 height: 80px;
 width: 180px;
}
</style>
</head>

<body>
<div id="box">Demo Box</div>
</body>
</html>

私が達成しようとしているのは、境界線の色が左上から表示され、流れて部門の周りにボックスの境界線を作成することです。これが可能であれば、専門家のガイダンスを知りたいだけでは不可能に思えます。

*「トロンバイクのように」MobyD のおかげで編集

4

2 に答える 2

3

ボックスの周りにアニメーションが必要だと仮定すると、一連の行をアニメーション化することで配置できます。各アニメーションは、終了時に次のアニメーションをトリガーします。

addLine1();
line1.animate({ width: width-of-box }, duration, function() {
   addLine2();
   line2.animate({ height: height-of-box }, duration, ... );
});

各線は適切な角に配置する必要があります。

デモ

よりきちんとした再帰的なソリューションを構築できる可能性がありますが、それはこれらの線に沿ったものであり、使用する必要があります。境界プロパティ自体は、この方法でアニメーション化することはできません。

于 2012-06-21T12:49:43.653 に答える
-1

グラデーションの境界線が必要だとすると、フローとはどういう意味ですか？

はい、できます。

2pxグラデーションボーダーの例：

色にグラデーションの背景を持つdivに配置された親戚を作成するだけです。次に、幅と高さがわずかに小さい、絶対にそこに配置された子divを作成します。これで準備が整いました。

http://jsfiddle.net/njL3H/を参照してください

于 2012-06-21T12:26:44.753 に答える