記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML と CSS を使用して円形および丸みを帯びた画像形式を実装する方法のサンプルコード

黄舟

リリース： 2017-07-22 09:50:38

オリジナル

2645 人が閲覧しました

エフェクト表示

HTML と CSS を使用して円形および丸みを帯びた画像形式を実装する方法のサンプルコード

実装コード

<<!DOCTYPE html><html><head>
    <title>JcMan</title>
    <style type="text/css">

    .image1{ 
        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:200px; 
    }

    .image2{        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:20px; 
    }
    </style>
    </head>
    <body>
    <center>
    <img class="image1" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>
    <img class="image2" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/> 
    </center>
    </body>
    </html>

ログイン後にコピー

以上がHTML と CSS を使用して円形および丸みを帯びた画像形式を実装する方法のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。