标签：abs 小例子 height amp 正方形 round back 一个 空格
1、border-radius
border-top-left-radius:10px; = border-top-left-radius:10px 10px; （水平10px 竖直10px 被正圆切割 两个值不同切割效果不同） border-top-right-radius:20px; = border-top-right-radius:20px 20px; border-bottom-right-radius:30px; = border-bottom-right-radius:30px 30px; border-bottom-left-radius:40px; = border-bottom-left-radius:40px 40px;
<style> div{ width:100px; height:100px; border:1px solid #000; position:absolute; left:calc(50% - 50px); /* 减号两边必须加空格 */ top:calc(50% - 50px); border-top-left-radius:100px 100px; /* 水平和垂直方向拉伸到尽头（在正方形中） 得到一个扇形 */ } </style> <body> <div></div>
border-radius:10px 20px 30px 40px / 10px 20px 30px 40px /* 前面为水平方向值 后面为竖直方向值 */
2、box-shadow
box-shadow:0px 0px 0px 0px #0ff /* 水平偏移量 竖直偏移量 模糊值 传播距离（可不填） */ /* 模糊是基于原来边框的位置向两边同时模糊 */ box-shadow:inset 0px 0px 1px 0px #fff /* 内阴影 */
阴影可设置多层，小例子：
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#000;
}
div{
position:absolute;
left:calc(50% - 150px);
top:calc(50% - 150px);
width:300px;
height:300px;
border-radius:50%;
/* border:1px solid #fff; */
box-shadow:inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 300px #f0f,
inset -10px 0px 300px #0ff,
0px 0px 50px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
}
</style>
<body>
<div></div>
</body>
标签：abs 小例子 height amp 正方形 round back 一个 空格
原文地址：https://www.cnblogs.com/tianya-guoke/p/10242023.html
