border-radiusプロパティのデモ

いや、いや、退屈な単純な丸い長方形は表示しません。 しかし、まったく同じ単純な丸みを帯びた長方形は、意味のある形状になる可能性があります。 私 「twitter」という言葉でそれらをました。



GeckoおよびWebkitエンジンに基づくブラウザーでのみ機能します。



次のようになります。

画像





他の人もそうですが、それほどきれいではありませんが、読みやすいです:

画像



しかし、このエントリの犯人であるレイアウトの一部を表示する前に、ブラウザの動作について一般の人々に不満を言いたいのですが、これはふさわしいとは言えません。



すべてのブラウザは、可能な場合はすぐに使用できるプロパティをいじめますが、重要ではありません。 そして、CSS3の重要な特性は、私を含む多くの人が同じ境界半径を使用するのに恥ずかしくない場合、現在禁忌です。



CSS3がまだ適切に設計されていないこと、およびブラウザーを好きなようにscり、境界線の半径のプロパティを変更することを完全に理解しています。もちろん、-moz-および-webkit-についてです。 さて、プロパティの属性は完全に異なりますが、ここではCSS3仕様が利用できないことにますます深刻になっています。



そして今、そのような進歩的なオペラが境界半径をレンダリングするためにエンジンを教えなかった理由は明らかではありませんか? それとも私はひどく見ていると何かを見逃していますか? 10betaでさえレンダリングしない-それは私を非常に動揺させた。



もちろん、機能を損なうことなく、他のブラウザーに座っているユーザーを無視して、CSS3の非クリティカルチャームをユーザーに使用する価値があると思いますか?



さて、理論については十分です。実践に移りましょう。 数日前、自宅で同僚とリラックスし、率直に言って退屈に苦しんでいたので、時間をつぶすことにしました。 当然のことながらborder-radiusを使用して、twitterという単語に追いつきます。



コードを長時間最適化し、レイヤーの数を減らし、スタイルをきれいにして最適化するなど、コードとスタイルを論理的に構築します。 ちなみに、あなたが倒錯した場合、このレイアウトのクロスブラウザバージョンを作成できますが、これはすべての人のためではなく、私はそのような目標を持っていませんでした。 さらに、これによりレイアウトが複雑になる場合があります。また、別の方法をとると、控えめで強力なコンピューターで繊細なIE6が中断されます。



まあ、まだ。 一般的な問題のうち、スケーリングには問題があり、どのサイズを課しても問題ありません。 時間があれば、私は問題を解決します。



実際、このページで見ることができます-http://absolvo.ru/tmp/18/-コードとスタイルの両方があります-まあ、一般的に必要なものはすべてあります。



または、そのような文字を生成し、いくつかのフォントをキャッチするサービスを作成する価値があるかもしれません-それは素晴らしく、愚かなでしょう-しかし、おそらくある種の限界はそれを好むでしょう。



All Articles