首页 > 代码库 > CSS随机排列 boder-radius

CSS随机排列 boder-radius

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } span.s1 { font: 12.0px "Helvetica Neue" } span.s2 { font: 12.0px ".PingFang SC" }</style>

当你注意到一个有辨识度的特征在以固定的规律循环重复时,那它试图营造的自然随机性就会立刻崩塌。

CSS中使用质数,从而增加了随机的真实感。这个被alex walker定名为“蝉原则”。他最先提出了通过质数来着鞥家随机真实性的想法。这个方法不仅适用于背景,还可以用于其他涉及有规律重复的情况。

 

border-image的原理基本上就是九宫格伸缩法:把图片切割成九块,然后把它们应用到元素边框相应地边和角。

 

当任意两个相邻圆角的半径之和超过border box的尺寸时,用户代理必须按比例减小各个边框半径所使用的值,直到它们不会相互重叠为止。

boder-radius可以单独指定水平和垂直半径,只要用一个斜杠(/)分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角。一个容器设置了不相等的水平和垂直border-radius;拐角处的弧线现在呈现出椭圆的形状,这个椭圆的水平和垂直半径就是我们为border-radius指定的值。

boder-radius这个属性不仅可以接受长度值,还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析,即宽度用于水平半径的解析,而高度用于垂直半径的解析。

我们可以为元素的每个角指定不同的值,而且还有两个方法可以做到这一点。第一种方法就是使用它所对应的各个展开式属性:border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radisu

不过我们可以一次性提供用空格分开的多个值。如果我们传给它四个值,这四个值就分别从左上角顺时针顺序应用到元素的各个拐角。如果我们提供的值少于四个,则它们会以CSS的常规方式重复,三个值,意味着第四个值和第二个值相同;如果只有两个值,以为13,24相同。

CSS随机排列 boder-radius