html小圆圈怎么放图片上_随笔

1、新建一个test.html文件。

2、在文件内，使用div标签创建一个模块，在div内，使用img标签创建一张图片。

3、在css标签内，设置div的高度、宽度，使用border-radius属性设置div和img标签都为圆形（border-radius:50%），从而实现圆圈里放个图片效果。

1、打开CSS新建一个图示的html文件。

2、下一步，需要在<body>标签那里添加图示的代码。

3、这个时候，可以添加<style>标签来设置图示的ellipse样式。

4、另外，还要在ellipse属性的里面添加图示的代码。

5、这样一来通过浏览器打开html文件即可把DIV做成椭圆形了。

可以实现，代码如下，你只要放在一个HTML页面中，运行即可看到效果

div#nifty{ margin: 0 10%background: #9BD1FA}

p {padding:10px}

div.rtop, div.rbottom{display:blockbackground: #FFF}

div.rtop div, div.rbottom div{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}

div.r1{margin: 0 5px}

div.r2{margin: 0 3px}

div.r3{margin: 0 2px}

div.rtop div.r4, div.rbottom div.r4{margin: 0 1pxheight: 2px}

</style>

<p>无图片的圆角表格</p>

</div>

欢迎分享，转载请注明来源：内存溢出

html小圆圈怎么放图片上