1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3 border-radius圆角

在日常项目过程中,border-radius这个属性算是非常常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。

一、border-radius使用

  border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有三种写法:

  (1)仅设置一个值

  第一种方法,应该是我们最常用的一种情况了,常用来给button加圆角边框,或者画一个圆形按钮,仅需设置一个数值,即可给元素的四个边角设置统一的圆角弧度,例如:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  <style type="text/css">  	#dd{  		width: 400px;  		height: 200px;  		display: flex;  		justify-content: space-between;  	}  	.tt{  	 border: 3px solid red;       height: 100px;       width: 200px;       border-radius: 30px;  	}     	.uu{     	 border: 3px solid darkgreen;       height: 100px;       width: 100px;       border-radius: 50%;  	}  </style>  	</head>  	<body>  		<div id="dd">  		<div class="tt"></div>  		<div class="uu"></div>  		</div>  	</body>  </html>

   (2)设置四个方向的值

  border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式,因此,border-radius : 30px;,其实等价于border-radius : 30px 30px 30px 30px;(ps:与padding和margin一样,各个数字之间用空格隔开)。

  这里要注意四个数值的书写顺序,不同于padding和margin的“上、右、下、左”的顺序,border-radius采用的是左上角、右上角、右下角、左下角的顺序,如下图所示:

(3)省略部分值

  与padding和margin一样,border-radius同样可以省略部分值,省略时同样是采用对角线相等的原则,例如:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  <style type="text/css">  	.tt{  	 border: 3px solid red;       height: 100px;       width: 200px;       border-radius: 50px 0;  	}    </style>  	</head>  	<body>  		<div id="dd">  		<div class="tt"></div>  		</div>  	</body>  </html>

原文链接:https://www.qiquanji.com/post/6959.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: