• 技术文章 > css教程

    border-radius属性怎么使用

    不言 不言 2019-02-14 17:51:49 原创 111
    border-radius属性是一个边框属性,可以用于设置边框圆角,那么border-radius属性的具体用法是怎样的呢?本篇文章就来给大家介绍一下关于border-radius属性的具体用法。下面我们来看具体的内容。

    CSS

    我们在平时看border-radius属性会看到它的语法如下所示

     border-radius: 1-4 length|% / 1-4 length|%;

    很多人可能不知道这是什么意思,其实这是border-radius的完整写法,我们平时写就是,border-radius:20px;,完整的写法应该是:border-radius : 20px 20px 20px 20px / 20px 20px 20px 20px;,其中前面四个20px表示水平半径,后面的四个值则表示垂直半径,我们就是通过设置水平半径和垂直半径来绘制椭圆或者圆形,也可以绘制一些其他有弧度的图形。

    接下来我们就来具体看一下border-radius属性的用法

    我们可以设置一个圆角边框或者是一个圆形

    圆角边框

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		#test {
        border: 3px solid lightblue;
        height: 200px;
        width: 300px;
        border-radius: 45px;
    }
    	</style>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

    效果如下

    微信截图_20190214172538.png

    圆形

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		#test {
        border: 3px solid lightblue;
        height: 100px;
        width: 100px;
        border-radius: 54px;
    }
    	</style>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

    效果如下

    微信截图_20190214172419.png

    可以设置带有弧度的其他图形

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    #test {
    	height: 100px;
        width: 200px;
        border: 3px solid pink;
        border-radius: 60px 5px;
    }
    	</style>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

    效果如下

    微信截图_20190214172821.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的其他相关栏目教程!!!

    以上就是border-radius属性怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第五期线上培训班
    专题推荐: border-radius
    上一篇:font-family属性怎么使用 下一篇:border-style属性怎么用

    相关文章推荐

    • 用CSS3中的border-radius属性制作常用图形 • css如何使用利用border和border-radius绘制一些小图形(代码实例) • div css3 border-radius 之圆角 DIV圆角 图片圆角 • CSS的border-radius属性怎么使用 • border-radius属性如何使用

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网