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

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;

见效果：（以上两种写法都可以实现：）

CSS 为div单个角设置弧度 border-radius相关推荐

css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
css记录div渐变背景设置border-radius圆角显示不完整
示例图1为纯色背景时的圆角显示图2为渐变色背景时的圆角显示原因首先我开始研究为什么一样是渐变背景,有的可以显示完整圆角,有的不可以. 宽度四舍五入影响了渐变背景的显示发现采用百分比的形式来设 ...
CSS：div中文字换行设置
word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:break-word; 只对英文起作用,以单词作为换行依据 white-space:pre-wrap; ...
html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
转自:https://www.thinkcss.com/shili/1372.shtmlcss div对象盒子向右偏移设置,使用css让div靠右必定距离-div向右移教程实例篇html div向右偏 ...
如何让div靠右_div向右偏移设置 css让div靠右移一定距离
转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...
html设置表格和div的距离,CSS/HTML Div调整大小和表格定位
我有3个div,父div,子div在顶部,另一个在底部.任何帮助将不胜感激,这里是我想达到的目标:CSS/HTML Div调整大小和表格定位当顶格调整大小/增加其大小,包含表将缩小,但保持在其位置上 ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
CSS写一个缺角的div
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en& ...
如何用CSS写一个缺角的div（附源码）
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en& ...

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

CSS 为div单个角设置弧度 border-radius相关推荐

最新文章

热门文章