标签：圆角 50px radius 设置 border CSS

 CSS圆角

中吾规者谓之圆。——《墨子·天志》

 

在逆战班中学习到了，如何利用CSS将一个矩形磨平了它的棱角：

CSS3圆角只需设置一个属性：border-radius。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有CSS度量值都可以使用：em、px、百分比等等。

 

比如下方是一个div做的方框：

只需要设置一个圆角半径为50px：

 

 

就变成了四个为50px的圆角图形：

 

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

现在设置两个值：

 

现在变成了左上、右下为50px，左下、右上为10px的图形：

 

现在设置三个值：

 

现在变成了左上为50px，左下、右上为10px、右下为90px的图形：

 

现在设置为四个值：

 

就变成了左上10px、右上40px、右下70px、左下100px的图形：

 

当然也就可以对某一个角进行设置

　　border-top-left-radius (左上)

 

　　border-top-right-radius （右上）

 

 

　  border-bottom-right-radius （右下）

 

 

 

　　border-bottom-left-radius （左下）

 

 

 

 

扩展：

当然也就可以画圆了，只要你设置的宽高是相同的，圆角是宽高的一半，如下图：

 

 

 

 

 

 

标签：圆角,50px,radius,设置,border,CSS
来源： https://www.cnblogs.com/miss-vogel/p/12345197.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。