css 边框四边对折

说实话，用CSS搞边框四边对折效果，我之前琢磨过，确实挺有意思的。
但说实话，这玩意儿折腾起来比想象中麻烦，尤其是对设计精度要求高的时候。

就拿你说的方法一，单个折角用线性渐变实现，我之前试过。
比如你要个4 5 度折角，可以这么玩：先给背景做个线性渐变，从透明过渡到边框色，角度设成4 5 度。
这样就在角上截出条斜边。
接着，再用另一个渐变，位置和大小调得巧妙点，跟第一个叠着。
说实话，我第一次弄的时候，得拿个网格线图才对得上来，背景-size的值调来调去，眼睛都快瞎了。
记得有回为了对齐，我把background-size设成5 0% 5 0%，结果在Firefox上直接崩了，那会儿我真是纳闷——这块我没亲自跑过Chrome和Edge，但数据我记得是至少Safari得转个弯。

方法二，用多个渐变模拟四边对折，这思路更绕。
你说是给每个角画两条背景线，一条左上到右下，一条右上到左下。
听起来简单，但实际操作要精确到像素。
我试过用background-size限制渐变范围，比如设成1 0% 1 0%，放在每个角上。
但调着调着发现，四个角颜色会轻微不统一，可能跟浏览器怎么裁剪渐变有关。
当时我还跟一哥们儿讨论，他说IE1 1 根本不支持background-size，得用border-radius workaround。
这话听着有点偏激，但确实反映了个问题——跨浏览器兼容性得花心思。

要说最让我头疼的，还是过渡效果这块。
比如你把linear-gradient的透明色到实色过渡调得缓一点，折角看起来就柔和了。
但调太慢，整个元素背景都糊了。
我当时也没想明白为啥，后来查资料说是渐变算法的问题。
还有阴影，加上去是好看，但一加立马发现性能要命，移动端卡得像狗。
所以说白了，这效果好不好看，真得看具体场景。
有时候为了这个折角，用户连元素都点不动了，那划不来。

现在回想起来，其实用box-shadow配合border-radius可能更简单，虽然不是严格意义上的"对折"，但视觉上差不了多少。
只是设计需求来的时候，甲方非要这个"折角"效果，没办法，只能硬着头皮上了。

CSS绘制四角边框

说实话，用linear-gradient做边框这事儿，我之前捣鼓过一段时间。
最让我头疼的是四个角怎么对齐，还有那些反向的背景线怎么弄。
记得有一次给个组件做设计，客户特别要求边框要像手绘一样，四角颜色都不一样，还带点渐变感。

当时我琢磨了半天，发现背景线布局是个坎儿。
你说的每个角配两条线，这思路对。
我试过直接画四条线，结果边缘重合得乱七八糟。
后来才搞明白，得用background-size来控制每条线的尺寸和位置。
比如设置成background-size: 1 px 2 0px;，这样每条线宽1 px，长度2 0px，刚好能从角延伸出去。

linear-gradient的参数我也踩过坑。
记得有个地方写成了linear-gradient(to right, fff, 000);，结果整个边框都是黑白渐变，根本不是从角开始的。
后来改成了linear-gradient(to right top, fff, 000)，才对上。
颜色起点和终点特别重要，要是起点和终点颜色一样，那不就是纯色线嘛，没效果。

最有意思的是反向渐变。
比如左上角的线要向右下角渐变，但右下角的线要向左上角渐变，这样看起来才自然。
我当时用八个linear-gradient，每个单独设置，最后背景-size一调，立马齐活儿了。

不过这块我没亲自跑过复杂场景，比如边框宽度变化或者圆角混用。
数据我记得是background-size的百分比可以跟px混用，但建议你核实下最新规范。
最关键的是，这种做法现在挺火的，很多设计师都在用，但得注意性能问题，渐变多了确实会重绘。

css边框圆角border-radius如何使用

记得有一次，我在设计一个网页的侧边栏，当时想让它看起来不那么单调，就想着给边框加个圆角。
当时我在电脑前捣鼓了好久，尝试了不同的值，1 0px、1 5 px、2 0px，结果发现，1 0px的时候边角太尖锐，2 0px又有点过于圆润，感觉不够和谐。
后来突然灵光一闪，试了1 5 px，结果效果刚刚好，既不尖锐也不圆润过度，给人一种很舒适的感觉。
这事儿让我想到，在设计的时候，有时候一个小小的改动，就能带来意想不到的效果。
等等，还有个事，我突然想到，如果给按钮也加个圆角，是不是也能让用户点击的时候感觉更顺滑呢？

css如何设置边框圆角？css圆角边框实现教程

border-radius设置圆角。

单个值：全部角一样。

四个值：顺时针左上右上右下左下。

斜杠：椭圆半径。

5 0%：圆形。

百分比：响应式。

组合值：复杂形状。

工具：生成代码。

无边框：加border。

值错误：检查单位。

z-index：层级问题。

旧浏览器：加前缀。

溢出：overflow hidden。

百分比：依赖尺寸。

性能：复杂影响渲染。