border-radius设置边框圆角_js圆角边框-CSDN博客

本文链接：https://blog.csdn.net/weixin_43918847/article/details/103111224

本文详细介绍如何使用CSS属性border-radius创建不同形状，包括矩形、圆、半圆、扇形及三角形等。通过调整border-radius的数值，可以轻松实现各种图形的绘制，适用于网页设计中的各种创意布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

border-radius: 给div元素添加圆角的边框;有四个值，分别为：左上角，右上角，右下角，左下角的排列顺序，也可以只写一个数值指向多个方位
其js语法：object : object.style.borderRadius=“5px”；
border-radius:40px; 效果如下圆角：京东样式
使用border-radius:来设置的样式
border-radius: 50%;圆形样式：
css样式
.yuangx{
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 50%;
background-color: skyblue;
}

border-radius: 半圆形样式
.yuangx{
width: 100px;
height: 50px; //注意此时的高为宽的一半
margin: 100px auto;
border-radius: 100px 100px 0 0;
background-color: skyblue;
}

扇形样式：
.yuangx{
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 100px 0 0;
background-color: skyblue;
}
在这里只有左上角变化，其余四角不变，那么只用设置左上左下即可。

三角形：用边框撑开div的宽、高
margin: 100px auto;
border: 50px solid green;
width: 0;
height: 0;
border-top-color: yellow;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
#fff也可以换成 transparent
transparent：表示全透明，详见如下链接：
http://caibaojian.com/css3/values/color/transparent.htm

全三角
.yuangx{
margin: 100px auto;
border: 50px solid green;
width: 0;
height: 0;
border-top-color: yellow;
border-right-color: blue;
border-bottom-color: pink;
border-left-color: orange;}

本文参考：励志故事博客：【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框