CSS圆角

最新推荐文章于 2024-05-23 00:00:00 发布

是梨子的阿

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量392

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/y_19018/article/details/104461141

版权

这是我在逆战班学习的第三周
以下我总结了《css 圆角》的使用。

css 圆角

一、Border-radius 圆角属性？
可以给一个元素添加圆角的属性。

二、Border-radius 设置属性值？

1.border-radius：50px

写一个值时，是指四个圆角值相同，一个元素四个角都被一个半径为50px的圆形相切。如图：
在这里插入图片描述
那么，一个元素也可以被一个椭圆形相切。如图：

#box1{ width:400px; height:400px; background:orange;
border-radius: 100px/150px;}
在这里插入图片描述
2.border-radius：50px 100px

写两个值时，是指：第一个值为左上角和右下角，第二个值为右上角和左下角。如图：

#box1{ width:400px; height:400px; background:orange;
Border-radius: 50px 100px;}
在这里插入图片描述
3.border-radius：50px 70px 100px

当写三个值时：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。如图：

#box1{ width:400px; height:400px; background:orange;
Border-radius: 50px 70px 100px ;}
在这里插入图片描述
4.border-radius：40px 60px 80px 100px

当设置四个值时：（方向是顺时针）第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。如图：

#box1{ width:400px; height:400px; background:orange;
Border-radius: 40px 60px 80px 100px;}
在这里插入图片描述
三、border-radius 也可以单独定义一个圆角？

定义左上圆角，border-top-left-radius:50px;
定义右上圆角，border-top-right-radius:50px;
定义右下圆角，border-bottom-right-radius:50px;
定义左下圆角，border-bottom-left-radius:50px;

例：

<!DOCTYPE html>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{text-align: center;line-height: 150px;}
      #box1 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-bottom: 30px;
                    border-top-left-radius:50px;}
      #box2 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-bottom: 30px;
                    border-top-right-radius:50px;}
      #box3 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-bottom: 30px;
                    border-bottom-right-radius:50px;}
      #box4 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-bottom: 30px;
                    border-bottom-left-radius:50px;}
    </style>
</head>
<body>
    <div id='box1'> border-top-left-radius:50px;</div>
    <div id='box2'>border-top-right-radius:50px;</div>
    <div id='box3'> border-bottom-right-radius:50px;</div>
    <div id='box4'> border-bottom-left-radius:50px;</div>
</body>
</html>

在这里插入图片描述
四、应用：如何做出圆形和椭圆 ?

1.制作一个圆形？

首先需要做一个正方形，设置 border-radius:50%，也可以设置 border-radius:200px ，属性值为正方形的一半，就会出现圆形效果。

如图：

#box1{ width:400px; height:400px; background:orange;
border-radius: 50%;
/* border-radius:200px; */}
在这里插入图片描述
2.如何制作椭圆？

当宽度和高度不同时，设置 border-radius:50% 。如图：

#box1{ width:400px; height:600px; background:orange;
border-radius: 50%;}
在这里插入图片描述
四、应用：如何制作半圆？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #box1 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-right: 30px;
float:left;
                    border-radius: 150px 150px 0  0 ;}
        #box2 { width:300px; height:150px ;background: orange;margin: 0 auto;margin-right: 30px;
float:left;
                    border-radius: 0 0 150px 150px;}
        #box3 { width:150px; height:300px ;background: orange;margin: 0 auto;margin-right: 30px;
float:left;
                    border-radius:150px 0 0 150px;}
        #box4 { width:150px; height:300px ;background: orange;margin: 0 auto;margin-right: 30px;
float:left;
                    border-radius:0 150px 150px 0;}
    </style>
</head>
<body>
    <div id='box1'></div>
    <div id='box2'></div>
    <div id='box3'></div>
    <div id='box4'></div>
</body>
</html>

在这里插入图片描述

是梨子的阿

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS圆角

这是我在逆战班学习的第三周以下我总结了《css 圆角》的使用。css 圆角一、Border-radius 圆角属性？可以给一个元素添加圆角的属性。二、Border-radius 设置属性值？1.border-radius：50px写一个值时，是指四个圆角值相同，一个元素四个角都被一个半径为50px的圆形相切。如图：那么，一个元素也可以被一个椭圆形相切。如图：#box1{ w...
复制链接

扫一扫