CSS3之border-radius半弧展示

最新推荐文章于 2023-12-22 13:49:55 发布

原创最新推荐文章于 2023-12-22 13:49:55 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #border-radius #半弧展示

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍如何使用CSS3的border-radius属性实现元素的圆角效果，并通过一个具体实例展示了如何仅对左侧边框应用圆角。代码示例简洁明了，便于读者快速掌握并应用于实际项目中。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之border-radius</title>
<style type="text/css">
.radius{ width:80px; height:24px; border-top-left-radius:12px; border-bottom-left-radius:12px; background:#ccc;}
</style>
</head>

<body>
<div class="radius"></div>
</body>
</html>