CSS中的border-radius属性
CSS | 边界半径属性 (CSS | border-radius Property)
The border-radius property is commonly used to convert box elements into circles. We can convert box elements into the circle element by setting the border-radius to half of the length of a square element.
border-radius属性通常用于将框元素转换为圆形。 通过将边框半径设置为正方形元素长度的一半,我们可以将框元素转换为圆形元素。
Syntax:
句法:
Element {Width: 150px;
Height: 150px;
border-radius: 50%;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
p {background: #73AD21;
width: 200px;
height: 150px;
border-radius: 50%
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>
Output
输出量
In the above example, 50% border-radius is applied to all the corners.
在上面的示例中,将50%的边界半径应用于所有角。
1)具有一个值的border-radius属性 (1) border-radius property with one value)
The property takes a single value to the border-radius and that value is applied to all the four corners and the corners are rounded equally.
该属性对边界半径采用单个值,并且该值应用于所有四个角,并且这些角均等地舍入。
Syntax:
句法:
Element {border-radius: 15px;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>
Output
输出量
In the above example, the border-radius of 25px is applied to all four sides equally.
在上面的示例中, 边界半径 25px均等地应用于所有四个侧面。
2)具有两个值的border-radius属性 (2) border-radius property with two values)
This property takes two values to the border-radius. The first value is applied to top-left and bottom-right corners, the second value is applied to top-right and bottom-left corners.
此属性将border-radius取两个值。 第一个值应用于左上角和右下角 ,第二个值应用于右上角和左下角 。
Syntax:
句法:
Element {border-radius: 15px 10px;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid red;
padding: 10px;
border-radius: 60px 30px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>
Output
输出量
In the above example, the border-radius of 60px is applied to top-left and bottom-right and 30px is applied to top-right and bottom-left corners.
在上面的示例中, 边框半径 60px应用于左上角和右下角,而30px应用于右上角和左下角 。
3)具有三个值的border-radius属性 (3) border-radius property with three values)
This property takes three values to the border-radius. The first value is applied to the top-left corner and the second value is applied to top-right and bottom-left corners, and the third value is applied to the bottom-right corner.
该属性将border-radius取三个值。 所述第一值被施加到左上角和所述第二值被施加到右上和左下的角,并且所述第三值被施加到右下角 。
Syntax:
句法:
Element {border-radius: 15px 10px 30px;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid green;
padding: 10px;
border-radius: 60px 30px 20px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>
Output
输出量
In the above example, border-radius of 60px is applied to top-left corner, 30px is applied to top-right and bottom-left corners and 20px is applied to bottom-right corner.
在上面的例子中,60像素 边界半径被施加到左上角 ,30像素被施加到右上和左下的角和20像素被施加到右下角 。
4)具有四个值的border-radius属性 (4) border-radius property with four values)
This property takes four values to the border-radius and applies four different values to each of the corners. The first value is applied to the top-left corner, the second value is applied to the top-right corner, the third value is applied to the bottom-right corner and the fourth value is applied to the bottom-left corner.
此属性将四个值应用于边界半径 ,并将四个不同的值应用于每个角。 所述第一值被施加到左上角 ,第二值被施加到右上角 ,第三值被施加到右下角和第四值被施加到左下角 。
Syntax:
句法:
Element {border-radius: 15px 10px 20px 5px;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid green;
padding: 10px;
border-radius: 60px 30px 50px 10px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>
Output
输出量
In the above example, 60px is applied to top-left corner, 30px is applied to the top-right corner, 50px is applied to bottom-right corner and 10px is applied to bottom-left corner of the box.
在上述例子中,60像素被施加到左上角 ,30像素被施加到右上角 ,50像素被施加到右下角和10px的被施加到盒的左下角 。
翻译自: https://www.includehelp.com/code-snippets/the-border-radius-property-in-css.aspx
CSS中的border-radius属性相关推荐
- [css] css中的border:none和border:0px有什么区别?
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- [css] css中的选择器、属性、属性值区分大小写吗?
[css] css中的选择器.属性.属性值区分大小写吗? 选择器和属性区分大小写,属性值如果是颜色可以不区分大小写吧 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性 发布时间:2020-09-23 14:26:58 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍css中如何使用counter-reset属性, ...
- CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
- css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性 毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性 属性 用途 语法(一些 ...
- php中li标签,li标签有哪些属性?css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性 在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
- html cellpadding css,CSS中cellspacing和cellpadding属性用法
CSS中cellspacing和cellpadding属性的使用是否了解,这里和大家分享一下,cellspacing属性设置表格边框之间和表格单元格之间的间距(以像素为单位):cellpadding属 ...
- css中的 type,css中如何使用list-style-type属性
css中如何使用list-style-type属性 发布时间:2020-09-24 10:05:15 来源:亿速云 阅读:88 作者:小新 小编给大家分享一下css中如何使用list-style-ty ...
- 如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
最新文章
- PhpStorm升级后调用某些类提示phpstorm Unhandled exceptions
- Google Map API 的基础使用
- 引路蜂地图API:Drawing包定义
- 寻找重复数—leetcode287
- 多线程和线程池的基本知识总结
- 滴滴章文嵩:一个人的 20 年开源热情和国内互联网开源运动
- IS-IS邻接关系建立过程
- 注意!JWT不是万能的,入坑需谨慎!
- 手机系统S40 S60 是什么意思?
- Binder机制原理简述
- ZEMAX | 如何对中间面进行优化
- Word2003入门动画教程75:在Word中插入文本框
- 大学生自己做网站如何赚钱
- TM中拒收自定义表情的设置方法(转)
- jqfactor_analyzer源代码解读02
- OSPF之LSA详解
- keepalive和keep-alive
- 在java中怎样做当鼠标选中文字单击鼠标右键出现菜单,定制鼠标右键“新建”菜单选项...
- 业余学Python是如何挣钱的?
- 我所认为的产品经理——从读PONY的产品笔记想到的
热门文章
- mysql orderby count_mysql中count(),groupby,orderby使用方法分享
- mysql zip 还原_mysql 压缩还原数据库
- AngularJS XMLHttpRequest
- Emacs中的Color Theme以及字体设置
- maven编译的时候排除junit测试类
- 关于background-*的一些属性
- BZOJ3771 Triple(FFT+容斥原理)
- 需加装饰——装饰模式
- 分解质因数-洛谷P3200 [HNOI2009]有趣的数列
- JDBC常用API小结