• 技术文章 >web前端 >css教程

    css怎么把div设置成圆角

    VV2021-05-17 14:38:41原创469

    css把div设置成圆角的方法是,为div设置border-radius属性,如【border-radius:5px】。border-radius属性是一个复合属性,这个属性允许我们为元素添加圆角边框。

    本文操作环境:windows10系统、css 3、thinkpad t480电脑。

    我们可以通过添加border-radius属性可以让边角变得圆润,具体代码如下:

    f94a861b413ee7eb66fa6011c282aaf.png

    效果:

    1f77a7956894051a6afeb0a6adde2c6.png

    border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性,这个属性允许你为元素添加圆角边框!

    举例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
    div
    {
    	border:2px solid #a1a1a1;
    	padding:10px 40px; 
    	background:#dddddd;
    	width:300px;
    	border-radius:25px;
    }
    </style>
    </head>
    <body>
    
    <div>border-radius 属性允许您为元素添加圆角边框! </div>
    
    </body>
    </html>

    显示结果:

    8f941186d8d63402461cffcf014b39f.png

    相关视频教程:css视频教程

    以上就是css怎么把div设置成圆角的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css div 圆角
    上一篇:css中字间距怎么调整 下一篇:css中的透明度该怎么设置
    第16期线上培训班

    相关文章推荐

    • css设置table圆角边框不起作用是什么原因• 使用CSS实现圆角渐变边框• css中如何实现圆角效果• css怎么设置图片圆角

    全部评论我要评论

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

    PHP中文网