提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > border-radius属性怎样运用【css教程】,border-radius

border-radius属性是一个边框属性,能够用于设置边框圆角,那末border-radius属性的细致用法是如何的呢?本篇文章就来给人人引见一下关于border-radius属性的细致用法。下面我们来看细致的内容。

我们在日常平凡看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>

结果以下

圆形

<!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>

结果以下

能够设置带有弧度的其他图形

代码以下

<!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>

结果以下

本篇文章到这里就悉数完毕了,更多精彩内容人人能够关注ki4网的其他相干栏目教程!!!

以上就是border-radius属性怎样运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"border-radius属性怎样运用【css教程】,border-radius"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线