【AI自动整理】
大家好,今天我们来讲一讲这个inline关键字。也就是说,很多同学可能有这样一个印象:如果不加inline,函数会进行调用,会产生调用栈空间不足等问题,导致程序溢出。于是认为引入inline关键字就可以解决这个问题。但是真的是这样吗?很可惜,许多网站的解释都是,inline实现内联优化,甚至官方文档也这么认为。其实这两者的作用不同。我们来测试一下,官方说不会检查栈,直接插入调用位置,不当作一个独立的函数调用。但是我们看示例代码,number_check仍然是一个独立的函数,main函数里面还是正常的调用指令,inline似乎没效果。那么inline关键字的实际作用是什么呢?
对于极限编译器,可以用C++11开始支持的always_inline属性达到内联优化。它会强制把函数变成内联,我们看到number_check函数确实内联到main函数体内了。所以always_inline才是真正的内联优化。而inline关键字是另一个意思,和static关键字相关。
static作用很简单,让符号只在当前翻译单元可见。什么是翻译单元呢?在多文件编译中才有意义,单文件中不需要考虑。我们知道用C++编译时有多个文件,会链接在一起。现在一个文件中写入函数foo,另一个文件调用foo,必须有foo的声明,否则编译错误。因为调用时编译器不知道是否有参数等信息。为了编译顺利,必须写声明才可以调用。
main文件写foo的声明,foo.cpp文件写foo的实现,声明和实现分离。这时需要前向声明。根据C++的ODR规则,一个符号在链接的文件中只能出现一次。否则链接器报错。foo.cpp中定义变量i,main文件中也定义i,就违反了ODR。解决方法是foo.cpp用extern声明,main文件定义i。这样主文件以其定义为准。但二者不能同时定义,否则冲突。
static的作用是把符号限制在翻译单元内,那么为什么还需要inline呢?有些需求是,main文件中可以使用foo.cpp中的变量i,但不想改成extern声明。一般来说,会写头文件避免多次包含。但头文件包含时相当于代码直接粘贴,这样也违反ODR。用static可以避免,但static值不共享。inline既避免重复定义错误,也实现跨单元共享一个符号。
所以头文件中函数常用inline,不会增加二进制文件体积,两个文件共享一个函数地址。inline对变量也一样,可以在不同文件共享一个变量i的值。所以inline经常用于头文件中。
对于模板函数,如果直接在头文件中写定义,也默认是inline。因为一般模板只在头文件中写。这是C++的特例。另外,类中直接定义的函数也默认inline。比如我们定义一个狗狗类,里面有个函数说话,在main和foo中都创建狗狗对象调用说话函数,不会出现重复定义错误,因为类成员函数默认内联。这也是为了避免ODR错误。
总之,inline真正作用是控制符号在不同翻译单元中的共享,和优化无关。不要再相信那些错误教程,汇编实现与C++标准是不同的东西。C++可以解释执行,不依赖具体架构。inline是C++符号模型的一部分,不要和汇编混为一谈。
【CSS】从新手到高手：解锁 border-radius 的全部潜能！
阅读时长：约15分钟
在前端开发中，细节决定成败。一个简单的圆角边框，可能让你的设计瞬间脱颖而出，而 border-radius 恰恰是实现这一魔法的关键工具。从基础的圆形、椭圆到不规则形状，border-radius 可以满足你各种创意需求。那么，如何用好这一属性，让你的界面更具吸引力？本篇文章将带你全面了解 border-radius 的强大功能和多样用法，无论你是新手还是资深开发者，都能有所收获！
border-radius 属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 简写为一个属性。
圆角生成的原理
我们以 border-top-left-radius 为例。border-top-left-radius 用来设置元素左上角的圆角效果。
图 圆角生成的原理
在 CSS 中设置的圆（椭圆）与盒模型的角相切的弧，就是我们画出的圆角了，这就是 border-radius 的原理。
border-top-left-radius 语法如下：
/* 1. 水平半径和垂直半径都是3px *//* 半径为 3px 的圆与盒模型的角相切，画弧 */border-top-left-radius: 3px;/* 2. 水平半径是0.5em, 垂直半径是1em *//* 水平半径是0.5em, 垂直半径是1em的椭圆与盒模型的角相切，画弧 */border-top-left-radius: 0.5em 1em;
CSS属性 border-radius 允许设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
border-radius语法
1. 单值语法：
/* 1. 单值语法 *//* top-left top-right bottom-right bottom-left 值为 50px */border-radius: 50px;/* border-radius 展开语法如下 */border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;
图 单值语法
2. 双值语法：
/* 2. 双值语法 *//* 双值语法设置的是对角的值 *//* 设置 top-left bottom-right 值为 50px *//* 设置 top-right 和 bottom-left 值为 20px */border-radius: 50px 20px;/* border-radius 展开语法如下 */border-top-left-radius: 50px;border-top-right-radius: 20px;border-bottom-right-radius: 50px;border-bottom-left-radius: 20px;
图 双值语法
3. 三值语法：
/* 3. 三值语法 *//* 设置 top-left 值为 50px *//* 设置 top-right、bottom-left 值为 20px *//* 设置 bottom-right 值为 5px */border-radius: 50px 20px 5px;/* border-radius 展开语法如下 */border-top-left-radius: 50px;border-top-right-radius: 20px;border-bottom-right-radius: 5px;border-bottom-left-radius: 20px;
图 三值语法
4. 同时设置水平半径和垂直半径：
/* 4. 同时设置水平半径和垂直半径 */border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px;/* border-radius 展开语法如下 */border-top-left-radius: 50px 25px;border-top-right-radius: 50px 25px;border-bottom-right-radius: 50px 25px;border-bottom-left-radius: 50px 25px;
图 同时设置水平半径和垂直半径
border-radius 的值支持使用长度单位和百分比单位来定义圆形半径或椭圆的水平半径和垂直半径。
长度单位包括常见的 px、em 等。
当使用百分比单位时，水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。
大值特征
我们现在有如下两组 CSS 代码：
/* CSS 代码1 */.box {width: 300px;height: 400px;margin: auto;margin-top: 200px;background-color: pink;border-top-left-radius: 300px;}
/* CSS 代码2 */.box {width: 300px;height: 400px;margin: auto;margin-top: 200px;background-color: pink;border-top-left-radius: 800px;}
我们发现得到的图形是一致的：
图 大值特征
这就涉及到了 border-radius 的大值特征：当我们设置极大的值（超过的盒模型的宽度和高度）时，会选取宽高的最小值进行展示。
工具推荐：圆角边框生成器
MDN为我们提供了圆角边框生成器工具：
。
有兴趣的话可以在这里进行调试可以在这里进行调试。
图 圆角边框生成器
工具推荐：FanyBorderRadius
FanyBorderRadius为我们提供了拖拽测试工具，支持我们通过拖拽生成圆角：
。
图 边框拖拽工具
END
通过本文的学习，相信你已经掌握了 border-radius 的基础与高级用法。它不仅是一个简单的 CSS 属性，更是提升 UI 设计精致度的利器。从圆形到椭圆、不规则按钮到复杂图形，只要熟练运用，你的设计将更具创意。如果你喜欢本文，别忘了分享给更多的开发者，一起探索 CSS 的无限可能！
接下来，挑战一下：用 border-radius 设计一个你喜欢的形状吧！
