css border _小知识

妙用css border-radius的使用方式/
1border-radius 给元素添加圆角边框，这是一个简写属性，是border-top-right-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius简写的一个属性。
语法：
border-radius: 1-4 length | % / 1-4 length | % 1-4 length;
注：border-radius最多可以设置八个值，也可以只设置一个值，下面的设置都是有用的。

文章插图

文章插图

2【css border】语法诠释如下图：
border-radius是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius简写当作的，这个四个属性别离对应元素的四个角，同时每个角有两个偏向，所以border-radius最多可以取8个值。按照CSS的取值挨次‘top - right - bottom -left’ 。
设置一个值时，所有的值都不异；
设置两个值：top bottom不异，left right不异；
设置三个值：top （left right不异） bottom；
设置四个值：top left right bottom；
border-radius 中呈现 ‘/’ 为程度半径 / 垂直半径。

文章插图

文章插图

3border-radius 是若何画圆角的
top-left为例，设置50px的圆角，是从元素top-left的极点界说为（0，0）然后把圆心平移到（50，50）画圆，所获得的边框。若是top-left设置的值分歧，同样平移到坐标点，则画椭圆。其他top-right、bottom-left、bottom-right同理。