• 技术文章 >web前端 >前端问答

    html中如何将边框变成圆的

    青灯夜游青灯夜游2022-01-21 17:21:30原创509

    方法:1、使用width和height属性将元素设置为正方形;2、使用“border: 边框大小 solid 颜色值;”给正方形元素添加边框;3、使用“border-radius: 50%;”语句将边框变成圆的。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html中将边框变成圆的

    1、创建一个div元素,使用width和height属性将其设置为正方形

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div{
    				width: 100px;
    				height: 100px;
    				background-color: #FFC0CB;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div></div>
    	</body>
    
    </html>

    1.png

    2、添加边框

    div{
    	width: 100px;
    	height: 100px;
    	background-color: #FFC0CB;
    	border: 2px solid black;
    }

    2.png

    3、将边框变成圆的

    div{
    	width: 100px;
    	height: 100px;
    	background-color: #FFC0CB;
    	border: 2px solid black;
    	border-radius: 50%;
    }

    3.png

    相关推荐:《html视频教程

    以上就是html中如何将边框变成圆的的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html 边框
    上一篇:一个实例用css来实现胖橘的喜乐(实例分享) 下一篇:用javascript怎么求1到100的累加
    PHP编程就业班

    相关文章推荐

    • html中怎么让列表横向排列• html如何给背景图片设置透明度• html的name和value是什么意思• HTML里怎么设置thead表头的颜色• html下拉菜单文字怎么变小

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网