问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

CSS 为div单个角设置弧度 border-radius

更新时间:2021-09-30 13:24 作者:你好像很好吃a点击:

1、 border-radius:该CSS属性是为一个div设置弧度值。下面遇到这样一个需求:
如图:可见右边的两个角是没有弧度,设置左边的两个角有弧度即可。
在这里插入图片描述
2、 对于border属性,CSS3提供了四个单独的属性:(可以实现弧度的转换)

属性值 说明
border-top-left-radius 为左上角设置弧度值
border-top-right-radius 为右上角设置弧度值
border-bottom-left-radius 为左下角设置弧度值
border-bottom-right-radius 为右下角设置弧度值

测试:我们设置:border-top-left-radius: 15px;
在这里插入图片描述
见效果:可见只有左上角具有了px的弧度。

3、 border-radius后面可以接不同个数的值:(和margin、padding等属性有些类似:)

1)border-radius后面有一个值时:表示四个角的值都相等(常用情况)
border-radius:15px;即:上下左右四个角的弧度值都是15px;
在这里插入图片描述
2)border-radius后面有两个值时:表示左上角 和 右下角 值相等取第一个值,右上角和左下角 值相等 取第二个值
border-radius:5px 15px;左上角和右下角为5px,右上角和左下角为15px;
在这里插入图片描述
3)border-radius后面三个值时:表示左上角 取第一个值,右上角和左下角弧度值相等并取第二个值,右下角取第三个值
border-radius:5px 10px 15px;左上角5px,右上角和左下角10px,右下角15px;
在这里插入图片描述
4)border-radius后面四个值时:分别代表左上角 右上角 右下角 左下角四个位置的弧度值。
border-radius:0px 5px 10px 15px;左上角0,右上角5px,右下角10px,左下角15px;
在这里插入图片描述
4、 最后所有有关border-radius的相关用法都记录完了,实现我们的需求就轻而易举了:

border-radius:15px 0 0 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;

见效果:(以上两种写法都可以实现:)
在这里插入图片描述

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容