openlayers - 角の丸い Openlayer マップ

Question

openlayer マップを角の丸い div に統合します。マップの角を丸くするにはどうすればよいですか? 開発者ツールで多くの div に border-radius を適用しようとしましたが、マップは角を丸くすることを拒否します。

アレックス

Answer 1

これは私にとってはうまくいきました。

JSフィドル

#demoMap
{
    position: relative;        
    width: 200px;
    height: 200px;
    left: 20px;
    top: 20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid black;
    overflow: hidden;
}

おそらく追加する必要があったと思います

overlfow: hidden;

openlayers API は div をプレースホルダーとして使用して、より多くの要素を挿入するだけなので、CSS スタイルに。

アップデート

Chrome のコメントを読んだ後、Chrome で動作させようとしましたが、Chrome のバグで border-radius を読んだ後はそれができないようです? CSS Border radius は Webkit の画像をトリミングせず、chrome 開発ツールを使用して要素スタイルを変更します。