CSS3 圆角_css3内凹圆角边框-优快云博客

本文链接：https://blog.youkuaiyun.com/csbysj2020/article/details/146305406

CSS3 圆角

随着Web设计的不断发展，CSS3的圆角功能为网页设计师提供了更多的设计可能性。本文将详细介绍CSS3圆角的基本概念、应用方法以及相关技巧，帮助您更好地掌握这一设计利器。

一、CSS3圆角概述

CSS3圆角是指在网页元素（如div、span等）的四个角上创建圆滑的边缘。通过CSS3的border-radius属性，我们可以轻松实现这一效果。圆角的出现，使得网页设计更加美观，用户体验得到提升。

二、CSS3圆角属性

CSS3圆角主要依赖于border-radius属性，该属性可以接受一个或多个值，具体如下：

单个值：设置所有四个角的圆角值。
两个值：第一个值设置左上和右下角的圆角值，第二个值设置右上和左下角的圆角值。
三个值：第一个值设置左上角的圆角值，第二个值设置右上和左下角的圆角值，第三个值设置右下角的圆角值。
四个值：分别设置左上、右上、右下和左下角的圆角值。

此外，border-radius属性还支持负值，当负值应用于圆角时，元素将呈现内凹效果。

三、CSS3圆角应用实例

以下是一个简单的CSS3圆角应用实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3圆角实例</title>
<style>
  .rounded-box {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
</style>
</head>
<body>
<div class="rounded-box"></div>
</body>
</html>

在上面的例子中，我们创建了一个宽度为200px、高度为100px的div元素，并通过设置border-radius属性值为10px，使其四个角呈现出圆角效果。