圆角样式。

*初级小白*~

于 2021-07-19 09:22:29 发布

阅读量89

点赞数

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

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/118881975

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了CSS中用于设置元素边框圆角的`border-radius`属性。通过示例展示了如何使用单个、两个、三个及四个值来定义不同方向的边框圆角，以及如何创建自适应的半圆形元素。内容涵盖了`border-radius`的多种用法，对于前端开发者理解并应用这一CSS特性非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #e67e22;
            /* border-radius: 10px; 一个值，上下左右*/
            /* border-radius: 10px 20px;两个值，左上和右下，右上和左下 */
            /* border-radius: 10px 20px 30px;三个值，左上，右上和左下，右下 */
            /* border-radius: 10px 20px 30px 40px;四个值，顺时针，左上，右上，右下，左下 */
            /* border-top-left-radius: 100px;左上 */
            /* border-top-right-radius: 100px;右上 */
            /* border-bottom-left-radius: 100px;左下 */
            /* border-bottom-right-radius: 100px;右下 */
            /* border-radius: 50px/100px;横轴和纵轴 */
            /* border-radius: 50% 50% 0 0/100% 100% 0 0;自适应的半圆 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>