CSS border-radius 圆角

最新推荐文章于 2022-08-19 09:59:01 发布

卋舉

最新推荐文章于 2022-08-19 09:59:01 发布

阅读量101

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120705919

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

这篇博客探讨了CSS中的外边距margin、浮动float、双线边框border以及过渡动画transition的使用。通过实例展示了如何创建带有圆角的元素，并利用CSS实现鼠标悬停时的动态效果。同时，文章还涉及到了图片边框、内边距和圆角处理。

摘要由CSDN通过智能技术生成

盒子外边距 margin:5px;
左浮动 float:left;
双线轮廓 border:5px double gray:双线(double)
过渡动画 transition:all .5s;(动画 transition)
圆角 border-radius:10%;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>border</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 盒子外边距 margin:5px;
        左浮动 float:left;
        双线轮廓 border:5px double gray; (双线 double)
        动画 transition:all .5s; (动画 transition)

     -->
    <style>
        .ab {
            width: 100px;
            height: 100px;
            /*外边距*/
            margin: 5px;
            /*左浮动*/
            float: left;
            background-color: aqua;
            /*双线轮廓 double*/
            border: 5px double gray;
        }

        .box1 {
            /*如果宽高一样,设置为50%,为正圆*/
            border-radius: 10%;
        }

        .box2 {
            border-radius: 8px;
        }

        .box3 {
            border-radius: 15px 0 15px 0;
        }

        .box4 {
            /*行高*/
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            /*动画 transition*/
            transition: all .5s;
        }

        .box4:hover {
            border-radius: 5px 50%;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="ab box1">1</div>
<div class="ab box2">2</div>
<div class="ab box3">3</div>
<div class="ab box4">4</div>
<hr style="clear: both">
<style>
    img {
        /*边框*/
        border: 1px dashed gray;
        /*内边距*/
        padding: 15px;
        /*圆角*/
        border-radius: 50%;
    }
</style>
<img src="images/o.jpg" alt="">
</body>
</html>

卋舉

关注

0
点赞
踩
0

收藏

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

盒子外边距 margin:5px;左浮动 float:left;双线轮廓 border:5px double gray:双线(double)过渡动画 transition:all .5s;(动画 transition)圆角 border-radius:10%;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport
复制链接

扫一扫

专栏目录