border-radius的使用

最新推荐文章于 2022-11-23 16:27:46 发布

小爱同学-Allen

最新推荐文章于 2022-11-23 16:27:46 发布

阅读量4.6k

点赞数 7

分类专栏： css3

本文链接：https://blog.csdn.net/qq_34595425/article/details/99694311

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

border-radius的基本使用，使用border-radius画半圆

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border-radius的使用</title>
	</head>
	<body>
		<div class="demo"></div>
		<div class="semicircle"></div>
		<style>
			.demo{
				width:200px;
				height:200px;
				border:1px solid #ccc;
				background-color:#f60;
				margin: 50px auto;
				/*100表示X轴的 50px表示y轴的*/
				border-top-left-radius:100px 50px;
				border-top-right-radius: 50%;
				border-bottom-left-radius:60px;
				border-bottom-right-radius:60px;
				/*等于 顺时针方向*/
				/*border-radius: 50% 50% 60px 60px;*/
			}
			.semicircle{
				width:200px;
				height:100px;
				margin:50px auto;
				background-color:pink;
				border-radius: 0 0 100px 100px;
			}
		</style>
	</body>
</html>

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

1设置一个值如下
border-radius:10px;表示上下左右都是10px

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一样，各个数字之间用空格隔开）。
注/100表示X轴的 50px表示y轴的/
border-top-left-radius:100px 50px;
　　这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

3.省略部分值
border-radius:50px 0;表示border-top-left-radius 50px、border-top-right-radius 0、border-bottom-right-radius 50px、border-bottom-left-radius 0px

border-radius完整结构形式（扩展了解一下，个人感觉好像用不到）
　　在W3C上查border-radius属性时，会发现上面描述的语法是这样的：

border-radius: 1-4 length|% / 1-4 length|%;
　　这是什么意思呢，我也看不懂，后来百度了解到，这是border-radius的完整写法，我们平时的写法其实都是简写，平时我们写的border-radius : 50px，其实完整的写法应该是：

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
/前四个表示x轴，后四个边上y轴，数值越大变的越小/
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
　　“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图
在这里插入图片描述

小爱同学-Allen

关注

7
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
border-radius的使用

border-radius的基本使用，使用border-radius画半圆在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。<!DOCTYPE html><html> <head> <meta ...
复制链接

扫一扫

专栏目录