如何使用border-radius创建酷炫的效果
border-radius圆角
- CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。不允许负值。
- 椭圆的水平半径"（horizontal radius）和"垂直半径"（vertical radius）如border-radius: 15px;
border-radius: 30% 70% 20% 40%图解
border-radius: 4em 8em及border-radius: 4em / 8em 图解
border-radius 70% 30% 30% 70% / 60% 40% 60% 40%解释
border-radius结合动画应用
* { box-sizing: border-box;}body { background: #003;}.container { height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;}.box { width: 60vmin; height: 60vmin; border: 1px dashed rgba(255,255,255,0.4); position: relative; &::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.4); transform: scale(1.42); }}.spin-container { width: 100%; height: 100%; animation: spin 12s linear infinite; position: relative;}.shape { width: 100%; height: 100%; transition: border-radius 1s ease-out; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: morph 8s ease-in-out infinite both alternate; position: absolute; overflow: hidden; z-index: 5;}.bd { width: 142%; height: 142%; position: absolute; left: -21%; top: -21%; background: url(https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed); background-size: 100%; background-position: center center; display: flex; color: #003; font-size: 5vw; font-weight: bold; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; animation: spin 12s linear infinite reverse; opacity: 1; z-index: 2;}@keyframes morph { 0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 100% {border-radius: 40% 60%;} }@keyframes spin { to { transform: rotate(1turn); }}复制代码 参考链接