想要设置盒子的边框我们都知道要用border，但我们要让盒子边框变的观赏性更强，可以给它设置想要的边框，变成圆型，圆角矩形，等等，那如何变成我们想要的样子呢！
给你一个公式 border-radius：length；里面设置值的大小，它是可以设置四个值，顺序为左上 右上 右下 左下，相当于在每个角上有一个圆形，我们设置圆的半径，我们设置的半径越大，弧线就越弯曲，然后多出来的部分相当与隐藏了，但还是存在的，所以我们看到的只有粉色部分。下面图片中这个紫色的部分就是被隐藏的，但还是存在，我们还可以单独设置每一个角的边框，
例如：
设置左上角边框border-top-left-radius: 30px;
设置右上角边框border-top-right-radius: 30px;
右下border-button-right-radius：80px；
左下border-button-right-radius：90px；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
border-radius: 30px;
设置圆角边框为30px
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>这是一个正方形，我们给它设置了圆角边框，只给它设置一个值，它就直接赋值给其他三个值
设置完以后盒子为这样
如果要让盒子变成圆形，先把盒子设置为正方形，在将盒子边框值设置为宽度或高度的一半
里面的值也可以是百分比的形式
例这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
border-radius: 50px;
//或者border-radius: 50%;//可以是百分比的形式
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
就可以设置边框为圆形
设置为圆角矩形也很简单，把border-radius: 50px;把里面的数值改为高度的一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 100px;
border-radius: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
随便分享一个好玩的东西，盒子阴影box-shadow：10px 10px 10px 10px color inset；
第一个数值设置水平方向的移动
第二个数值为垂直方向的移动
第三数值为模糊的距离
第四为阴影的尺寸
第五为颜色
第六默认设置为outset外阴影，可以设置内阴影inset，但不能直接设置outset，要不然直接被杠掉
如果要求为外阴影那第六个数值就可以不用写了，原因你懂的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
/* 第一个数值为水平方向移动
第二个数值为垂直方向移动
第三数值为模糊距离
第四数值为阴影的尺寸
颜色
默认outset为外阴影,inset为内部阴影,不能直接设置outset,否则阴影无效 */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>还有一个类似的阴影玩法，文字阴影 text-shadow：10px 10px 10px color； 里面也是可以设置四个值。
同样第一个值可以调水平的方向，第二个调垂直方向，第三调阴影的范围，第四就不多说哩。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3 {
//这就是设置文字阴影//
text-shadow: 10px 10px 10px red;
}
</style>
</head>
<body>
<h3>我是文字阴影</h3>
</body>
</html> 
ok就是这样，其实很简单，每天分享自己学的知识
标签：圆角,边框,radius,设置,10px,阴影,border From： https://blog.csdn.net/2401_89487615/article/details/145115873