css如何设置圆角边框

2021-04-30,

css设置圆角边框的方法是使用圆角边框【border-radius】实现,如果这四个弧度的圆角相同,可以写成【border-radius:30px;】。

/2021/04/a4fa72c6.jpg

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css设置圆角边框的方法:

圆角边框(border-radius)的基本用法:

圆角边框的最基本用法就是设置四个相同弧度的圆角

boder-top-left-radius:30px;      //左上角
boder-top-right-radius:30px;   //右上角
boder-bottom-left-radius:30px;  //右下角
boder-bottom-right-radius:30px; //左下角

如果这四个弧度的圆角相同,可以写成:

border-radius:30px;

css设置圆角边框:

css部分:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html部分:

 <div class="div1">圆角边框</div>

效果如图:

/2021/04/7c45cf4f.png" /2021/04/7c45cf4f.png" alt="f9b5784b5a61f13d8b1be907fc73108.png

相关教程推荐:CSS视频教程

以上就是css如何设置圆角边框的详细内容,更多请关注北冥有鱼其它相关文章!

本文转载自【PHP中文网】,希望能给您带来帮助,苟日新、日日新、又日新,生命不息,学习不止。

《css如何设置圆角边框.doc》

下载本文的Word格式文档,以方便收藏与打印。