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、带有指定背景颜色的元素的圆角：

#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>

div css3 border-radius 之圆角 div圆角图片圆角相关推荐

在线图片改圆角工具在线图片圆角网站
在线图片改圆角工具在线图片圆角网站矩形图片放在网站上会觉的呆版,但在PS里处理也不容易.现在有了在线图片改圆角工具,就变的非常简单了. http://free.logomaker.cn/tools ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
html导航栏圆角,怎么实现css圆角？
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,下面我们就来介绍一些css圆角的实现方法. css3实现圆角边框: css中可以使用border-radius属 ...
div+CSS3实现圆角按钮代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
Javascript对圆角div的实现
为什么要做圆角的div: 圆角div平滑美观,某些情况下有比较不错的效果.比如说要做一个报message的消息框,那么动态的生成一个圆角div则很有意义.而对html样式控制的css本身是不直 ...
css实现圆角div
原理: 效果图: 代码: <html> <head> <title>圆角div</title> <style type="text/cs ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
HTML5、CSS3应用教程之跟DIV说Bey!Bey!
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...

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

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

CSS 圆角

CSS border-radius 属性

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

2、带边框元素的圆角：

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

提示

CSS border-radius - 指定每个角

创建椭圆角：

div css3 border-radius 之圆角 div圆角图片圆角相关推荐

最新文章

热门文章

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

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

CSS 圆角

CSS border-radius 属性

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

2、带边框元素的圆角：

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

提示

CSS border-radius - 指定每个角

创建椭圆角：

div css3 border-radius 之圆角 div圆角 图片圆角相关推荐

最新文章

热门文章

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

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

div css3 border-radius 之圆角 div圆角图片圆角相关推荐