CSS3 效果预览
r
r
r
r
CSS3 效果
实时 CSS 代码
border-radius 圆角
💡 观察缩放：把滑块拉到
把滑块拉到相邻角半径之和超过盒子边长时，会出现橙色提示条，点击 ▶ 播放归圆动画 可以看到四个圆汇聚成浏览器真实渲染半径的过程。
100% 甚至更高，虽然虚线圆在交叉，但真实的盒子依然是一个完美的圆形，因为浏览器底层阻止了圆角溢出。
把滑块拉到相邻角半径之和超过盒子边长时，会出现橙色提示条，点击 ▶ 播放归圆动画 可以看到四个圆汇聚成浏览器真实渲染半径的过程。
box-shadow 阴影
透明度
渐变
border-image 图片边框
⚠️ 前提条件：border-image 必须配合 border 使用。请先在下方设置边框样式、宽度和颜色。
border-image-slice 加 fill
多背景图像 background-image
💡 核心：CSS 允许用逗号分隔声明多个背景图。多个图层从后往前叠加：第一个在最上层，最后一张在最底层。每层可独立控制位置、大小、平铺方式。
.box {
background-image: ...;
background-position: ...;
background-size: ...;
background-repeat: ...;
}