Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Sample code for how to implement circular and rounded image formats with HTML and CSS

Sample code for how to implement circular and rounded image formats with HTML and CSS

黄舟

Release： 2017-07-22 09:50:38

Original

2726 people have browsed it

Effect display

Sample code for how to implement circular and rounded image formats with HTML and CSS

Implementation code

<<!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>

Copy after login

The above is the detailed content of Sample code for how to implement circular and rounded image formats with HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css html

source：php.cn

Previous article：Solving the problem of spaces in html Next article：Examples of how to embed special fonts in Chinese and English in html

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn