ホームページ > 記事 > ウェブフロントエンド > CSSコードを賢く使って丸い表を作成する

CSSコードを賢く使って丸い表を作成する

小云云オリジナル: 2017-11-16 16:15:422532ブラウズ

CSS がカスケードスタイルシート (英語の正式名: Cascading Style Sheets) であることは誰もが知っています。これは、HTML (標準汎用マークアップ言語のアプリケーション) または XML (標準汎用マークアップ言語のサブセット) を表現するために使用されるファイルです。スタイルのコンピューター言語。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。

それでは、今日は CSS コードを使用して丸いテーブルを作成するためのちょっとしたトリックをお教えします。もちろん、丸い div を作成することもできます。

その効果は以下のとおりです:

CSSコードを賢く使って丸い表を作成する

<html xmlns="http://www.phpernote.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS打造圆角Table</title>
<style type="text/css">
div.RoundedCorner{background:#9BD1FA;width:260px;}
b.rtop, b.rbottom{display:block;background:#FFF}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}
b.r1{margin:0 5px}
b.r2{margin:0 3px}
b.r3{margin:0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height:2px}
</style>
</head>
<body>
    <div class="RoundedCorner">
        <b class="rtop">
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
            <b class="r4"></b>
        </b>
        <table style="width:100%;height:100px;">
            <tr>
               <td>单元格1</td>
               <td>phpernote.com</td>
            </tr>
            <tr>
               <td>单元格3</td>
               <td>单元格4</td>
            </tr>
        </table>
        <b class="rbottom">
            <b class="r4"></b>
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
        </b>
    </div>
</body>
</html>

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントサイズスタイルをサポートし、Web ページのオブジェクトやモデルのスタイル。フロントエンドを学習しているかバックエンドを学習しているかに関係なく、私たちは皆 CSS の基本的な知識を習得する必要があります。CSS を使用して丸テーブルを作成するための上記の小さなチュートリアルがすべての人に役立つことを願っています。

CSSコードを賢く使って丸い表を作成する

関連記事