div css3 border-radius 之圆角 div圆角图片圆角

最新推荐文章于 2024-07-23 11:30:08 发布

徊忆羽菲

最新推荐文章于 2024-07-23 11:30:08 发布

阅读量1.6k

点赞数 1

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

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/122367353

版权

Html 专栏收录该内容

248 篇文章 8 订阅

订阅专栏

div css3 border-radius 之圆角 div圆角图片圆角

CSS 圆角

通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

CSS border-radius 属性

CSS border-radius 属性定义元素角的半径。

提示：您可以使用此属性为元素添加圆角！

1、带有指定背景颜色的元素的圆角：

在这里插入图片描述

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

2、带边框元素的圆角：

在这里插入图片描述

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

3、带有背景图像的元素的圆角：

在这里插入图片描述

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

提示

border-radius 属性实际上是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 
</style>
</head>
<body>

<h1>border-radius 属性</h1>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>一个值 - border-radius: 15px:</p>
<p id="rcorners4"></p>

</body>
</html>

在这里插入图片描述

创建椭圆角：

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
} 
</style>
</head>
<body>

<h1>border-radius 属性</h1>

<p>椭圆边框 - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>

<p>椭圆边框 - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>

<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners3"></p>

</body>
</html>

在这里插入图片描述

徊忆羽菲

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
div css3 border-radius 之圆角 div圆角图片圆角

div css3 border-radius 之圆角 div圆角图片圆角CSS 圆角CSS border-radius 属性1、带有指定背景颜色的元素的圆角：2、带边框元素的圆角：3、带有背景图像的元素的圆角：提示CSS border-radius - 指定每个角CSS 圆角通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。CSS border-radius 属性CSS border-radius 属性定义元素角的半径。提示：您可以使用此属性为元素添加圆角！1、带
复制链接

扫一扫