css3样式——圆角边框和过渡应用

最新推荐文章于 2023-11-27 11:01:34 发布

洋毛

最新推荐文章于 2023-11-27 11:01:34 发布

阅读量826

点赞数

分类专栏： html 文章标签： css3 css html 前端

本文链接：https://blog.csdn.net/weixin_45968014/article/details/105040853

版权

border-radius属

css3的圆角边框实际是在矩形的是个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。
css3的圆角边框使用border-radius实现。基本语法是：border-radius：1-4 length|%/1-4 length | %
length 的值不可为负值，/的前面的值是水平半径，后面的值但是垂直半径，无/则水平和垂直一样。顺序是top-left、top-right、bottom-fight、bottom-left，省略bottom-left，则与top-right相同，省略bottom-right与top-left相同，省略top-left与top-right相同
写法：border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：右下角
border-bottom-left-radius：左下角
画一个双圆例子如下


<!DOCTYPE<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
   padding: 0px;
        margin: 0px;}
        #one{
   
            width: 400px;
            height: 400px;
            background-color: aqua;
            border-radius: 50%;
            float: left;
            position: fixed;
        }
        #two{
   
            float: left;
            width: 100px;
            height: 100px;
            background: white;
            border-radius: 50px;
            position: fixed;
            left: 150px;
            top:150px;

        }
    </style>
</head>
<body>
<div id="one"></div>
<span id="two"></span>
</body>
</html>

在这里插入图片描述
画一个正方形利用border-radius属性：


<!DOCTYPE<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"

最低0.47元/天解锁文章

洋毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3样式——圆角边框和过渡应用

border-radius属css3的圆角边框实际是在矩形的是个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。css3的圆角边框使用border-radius实现。基本语法是：border-radius：1-4 length|%/1-4 length | %length 的值不可为负值，/的前面的值是水平半径，后面的值但是垂直半径，无/则水平和垂直一样。顺序是top-left、...
复制链接

扫一扫