码迷,mamicode.com
首页 > Web开发 > 详细

CSS随机排列 boder-radius

时间:2017-06-22 12:03:11      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:font   bottom   ima   半径   原理   otto   一点   适用于   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

标签:font   bottom   ima   半径   原理   otto   一点   适用于   style   

原文地址:http://www.cnblogs.com/wlxll/p/7063993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!