书小宅之网页设计CSS3——圆角矩形

书小宅

已于 2022-07-13 10:26:37 修改

阅读量471

点赞数 1

分类专栏：前端文章标签：圆角矩形 CSS3

于 2019-07-28 18:07:57 首次发布

本文链接：https://blog.csdn.net/qq_36447261/article/details/97617344

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

圆角半径四个方向的参数都写时，对应的顺序是左上，右上，右下，左下。

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

注释：按此顺序设置每个 radius 的四个值方向的圆角占类元素宽和高的百分比。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。

border-radius:2em;
example 1
等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

example 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3绘制圆角矩形</title>
<style>
	.shape-1{width:300px; height:150px; background-color:#0cf; border-radius:50%}
	/*border-radius:50px的参数是像素值：圆角半径的值*/
	/*border-radius:50%的参数是百分比：圆角半径占shape-1的实际宽度的百分比*/
	/*border-radius:50%/20%：水平方向和垂直方向*/  
	.shape-1:after{content:""; border-right:1px solid #000; border-bottom:1px solid #000; position:absolute; width:50%; height:50%;}
	/*因为是行内元素,需要加position*/    
</style>
</head>

<body>
<section>
    <div class="shape-1"></div>
</section>
<script>
</script>
</body>
</html>

在这里插入图片描述

书小宅

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
书小宅之网页设计CSS3——圆角矩形

圆角半径四个方向的参数都写时，对应的顺序是左上，右上，右下，左下。border-radius: 1-4 length|% / 1-4 length|%;注释：按此顺序设置每个 radius 的四个值方向的圆角占类元素宽和高的百分比。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-rig......
复制链接

扫一扫

专栏目录