# 并不存在的outline-radius
# 又是折腾
新版的UI规范出来了，老项目可完犊子了。。
因为是老项目，各种组件都得手动改。。😐
比如下面的按钮，点击聚焦时（也就是:focus或者:focus-within）时周围要有一圈外发光。类似于下面的左边这种效果。
# outline和并不存在的outline-radius
说到一圈外发光，肯定想到outline，先用它试一下。
给按钮加上一个样式：
button:focus-within {
outline: 4px solid rgba(22,118,254,0.13);
}
1
2
3
2
3
点击发现实际效果是上图右边那种样式：外发光并没有和按钮一样变成圆角，而是矩形形状。
此时我灵机一动瞎搞，既然有border-radius，会不会有outline-radius呢？
🤣 但实际测试后并没有。。。（我测试的是谷歌浏览器）
之所以强调是谷歌浏览器，是因为在火狐浏览器中它是存在的，不过要加个-moz-，叫-moz-outline-radius。
# box-shadown
那outline-radius还是算了，还是用box-shadown来实现吧。。
button:focus-within {
box-shadow: 0 0 0 4px rgba(22,118,254,0.13);
}
1
2
3
2
3
# 实例
⚠️注意
手机端效果可能不明显。