css3圆角属性

最新推荐文章于 2024-05-23 15:17:44 发布

你真好看l

最新推荐文章于 2024-05-23 15:17:44 发布

阅读量384

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103293987

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

在这里插入图片描述该属性是一个简写属性，将四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

四个值分别代表左上右上右下左下（顺时针）
两个值，前一个代表左上和右下，后一个代表右上和左下

值可以是具体值或者百分比定义圆形半径或椭圆的半长轴，半短轴。负值无效。

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。
即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。
当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

练习：
1画圆：

<div id="test">
			
</div>
#test{
				width: 100px;
				height: 100px;
				background-color: pink;
				border-radius: 100px;
			}

在这里插入图片描述
2椭圆：

#test{
				width: 100px;
				height: 50px;
				background-color: pink;
				border-radius: 50px/25px;
			}

在这里插入图片描述 #test{ width: 50px; height: 100px; background-color: pink; border-radius:25px/50px; }

在这里插入图片描述

3拱形：

#test{
				width: 100px;
				height: 100px;
				background-color: pink;
				border-radius:50px 50px 0 0 ;
}

在这里插入图片描述

4半圆

#test{
			width: 100px;
			height: 50px;
			background-color: pink;
			border-radius:50px 50px 0 0;
		}

在这里插入图片描述 5左上角

#test{
				width: 100px;
				height: 100px;
				background-color: pink;
				border-radius:100px 0 0 0;
			}

6消息框

#test{
				position: relative;
				width: 100px;
				height: 60px;
				background-color: pink;
				border-radius:10px;
			}
			#test:after{/*画三角形*/
				position: absolute;
				content: " ";
				width: 0px;
				height: 0px;
				border-width: 10px;
				border-style: solid;
				border-color: transparent transparent transparent pink ;
				left: 100px;
				top: 20px;
			}

7.qq对话框

/**/
#test{
				position: relative;
				width: 200px;
				height: 60px;/*1.内容区占位置不设置背景颜色*/
				background-color: pink;
				border-radius:10px;
			}
			#test:after{
				position: absolute;
				right: -20px;/*调整位置*/
				top: 0px;
				content: "";
				width: 30px;
				height: 30px;
				
				border-width: 0 0 30px 30px;/*2.设置下边框和左边框*/
				border-style: solid;
				border-left-color:transparent;/*4.左边框设置为transpant得到一个特别的形状*/
				border-bottom-color: pink;
				border-radius: 0 0 60px 0;/*3.下边框设置圆角属性值，形成一个半径为border-left加widh的四分之一圆弧*/
				
				
			}

在这里插入图片描述 8.风车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{  /*禁止系统滚动条*/
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				width: 300px;
				height: 300px;
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				transition: 2s;
			}
			#wrap > div{
				float: left;
				margin: 10px;  /*这里margin没有重叠，因为bfc中的内容不会与float重叠*/
				width: 130px;
				height: 130px;
				border: 1px solid;
				background-color: deeppink;
				box-sizing: border-box;/*这样加border才不会破坏布局*/
				
			}
			#wrap > div:nth-child(1),#wrap > div:nth-child(4){
				border-radius: 0 60%;
			}
			#wrap > div:nth-child(2),#wrap > div:nth-child(3){
				border-radius: 60% 0 ;
			}
			#wrap:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			
		</div>
	</body>
</html>

在这里插入图片描述

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3圆角属性

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个简写属性，将四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-ra...
复制链接

扫一扫

专栏目录