CSS3_html/css_WEB-ITnose で角丸長方形を描画する簡単な例

インターネットの発展に伴い、CSS も常に改善されており、長年にわたる Web 開発のニーズを完全に吸収し、非常に人気のある角丸長方形の border-radius 属性など、多くの新しい CSS 機能を提案していますが、残念ながら、このプロパティは現在、どのブラウザでもサポートされていません。

一部のブラウザには、独自のプライベートな角丸プロパティがあります。 FF の -moz-border-radius、Safari、Chrome の -webkit-border-radius など。効果は以下の図に示されています:

FF の角丸

Safari と Chrome の角丸 (Safari と Chrome は同じカーネルを使用します。ここでは Chrome の効果のみです)

IE と Opera にはプライベート角丸属性がありません。ある場合は、各ブラウザの「番号を一致」させて「互換性」効果を実現できるように、各ブラウザのすべてのプライベート属性を記述する方がはるかに簡単になります。

以下は、Baidu Youah の CSS 角丸ソリューションの例です:

XML/HTML コード

2. ;

4. < ;/div> ;

5. CSS コード:
6. JavaScript コード

7. .box1 {

背景:url(images/bg1.gif)repeat-x #1d6cb7;マージントップ:1em;




位置:相対;

1. 幅:778px;

2. .box1 .tl、.box1 。 tr、.box1 .bl、.box1 .br {

3. 幅:5px;

4. 位置:絶対;

5. 繰り返しなし;
6. オーバーフロー:hidden;

7. }

8. 高さ:40px

9. }

10. .box1 .tl {

11. 左:0;

12. 上:0;

13. .box1 .tr {

14. 上:0;

15. 背景位置:0 -5px;

16. .box1 .bl {

17. 左:0;

18. 背景位置:0 -10ピクセル;

    }

19. .box1 .br {

20. 右:0;

21. 背景位置:0 -15px;

    }