【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图 文）
border-radius包含5种设置圆角样式方式：
border-radius ：同时设置4个边框的圆角样式。
border-top-left-radius ：设置左上角边框的圆角样式。
border-top-right-radius ：设置右上角边框的圆角样式。
border-bottom-left-radius ：设置左下角边框的圆角样式。
border-bottom-right-radius ：设置右下角边框的圆角样式。
图片示例（设置四个边框圆角值为20px）：
border-radius的参数说明：
border-radius可以一次性对四个角设置相同的值，也可以对4个角分别设置圆角样式。而秘诀就在于设定border-radius的参数个数，border-radius的参数个数范围为1~4个。
下面分别说明参数1~4个所代表的含义：
- 当参数个数为：1
说明：4个边框的圆角样式都采用这个设置。
例：
border-radius：20px;/*4个边框圆角样式都为20px*/
2.当参数个数为：2
说明：
第1参数：左上角和右下角边框的圆角样式。
第2参数：右上角和左下角边框的圆角样式。
例：
border-radius：20px 10px;/*左上角和右下角：20px；右上角和左下角：10px*/
3. 当参数个数为：3
说明：
第1参数：左上角边框的圆角样式。
第2参数：右上角和左下角边框的圆角样式。
第3参数：右下角边框的圆角样式。
例：
1
border-radius：20px 10px 40px;/左上角：20px；右上角和左下角：10px；右下角：40px/
4.当参数个数为：4
说明：
第1参数：左上角边框的圆角样式。
第2参数：右上角边框的圆角样式。
第3参数：右下角边框的圆角样式。
第4参数：左下角边框的圆角样式。
例：
border-radius：20px 10px 50px 30px;/左上角：20px；右上角：10px；右下角：50px；左下角：30px/
当然上图的样式也可以用圆角的单独样式来设置：
border-top-left-radius ：20px。
border-top-right-radius ：10px。
border-bottom-left-radius ：30px。
border-bottom-right-radius ：50px。
只是这样设置太过于繁琐，不利于优化了css文件代码。
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图 文）相关推荐
- 【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
- 【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具 请先学习该文 ...
- 【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
- 【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 【响应式Web前端设计】设置图片间隙为0
解决方案一background 设置父容器的background,可以平铺一个合适的背景或图片.这样的话,两个图片之间的过渡,就会显得更加平滑.但是相关空隙依然存在,只不过因为父容器的背景色的缘故,使 ...
- 【响应式Web前端设计】CSS后代选择器和子代选择器
文章目录 子代选择器:>号 后代选择器:空格 文章目录 子代选择器:>号 后代选择器:空格 子代选择器:>号 .father>div{border: 2px solid blu ...
- 【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
- 【响应式Web前端设计】Register Demo
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用户 ...
- 【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...
最新文章
- Melkman's Algorithm
- 【C++】 保存内容到文件工具
- JavaScript机器学习之线性回归
- goland 远程调试go_手把手教你学Go语言，基础环境配置和Hello World
- 显示照片的二维直方图
- oracl 单行字符型函数
- apache启服务命令_linux系统下apache服务的启动、停止、重启命令
- Linux运行shell脚本出现出错，可能是环境编码不一致造成的。
- HDU4706 Children's Day
- nginx日志采集 mysql_shell + go + mysql nginx日志统计 （三） ：数据的展示
- 单片机一键开关机硬件电路
- 数据结构_树与二叉树总结
- 【嵌入式】学习心路历程与总结
- CodeForces - 1538G Gift Set （二分）
- Win10系统pin码忘记了？
- Napster：生死难料，前途未卜
- 高斯判别算法GDA（吴恩达机器学习c#实践，高斯模板上同心椭圆马氏距离画法，三）
- js小白之路(十一)——原型与继承
- 什么是腾讯云web应用防火墙？有哪些优势以及适用于什么场景？
- Android keytool 不是内部或外部命令