CSS3 - 随笔分类 - 7-Eleven

Flex布局

摘要：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局注意：webkit内核浏览器必须加上“-webkit-”前缀。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。基本概览：采阅读全文

posted @ 2016-07-09 19:00 7-Eleven 阅读(380) 评论(0) 推荐(0)

切角

摘要：弧形切角的制作阅读全文

posted @ 2016-07-03 21:31 7-Eleven 阅读(196) 评论(0) 推荐(0)

::selection

摘要：网站文本被选中，默认是蓝色的。要想改变，::selection能实现 ::selection使用语法：阅读全文

posted @ 2016-07-03 20:03 7-Eleven 阅读(114) 评论(0) 推荐(0)

background

摘要：background新增的属性background-size，background-clip,background-origin background-size：基本语法取值说明： 1、auto:此值为默认值，保持背景图片的原始高度和宽度； 2、<length>此值设置具体的值，可以改变背景图片的阅读全文

posted @ 2016-07-03 14:03 7-Eleven 阅读(151) 评论(0) 推荐(0)

text-overflow

摘要：语法： text-overflow ： clip | ellipsis 1、clip:表示不显示省略标记(...)，而只是简单的裁切，需要在一定的高度范围内配合overflow:hidden属性使用，如果不配合的话将无任何效果； 2、ellipsis：对象文本溢出时将显示省略标记(...)，需要配合阅读全文

posted @ 2016-07-03 13:08 7-Eleven 阅读(147) 评论(0) 推荐(0)

border-color

摘要：不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是因为这一点，css3的border-color应用是相当的少这样写没有效果。边框渐变效果阅读全文

posted @ 2016-07-03 13:06 7-Eleven 阅读(225) 评论(0) 推荐(0)

animation

摘要：animation:<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-di 阅读全文

posted @ 2016-07-03 12:13 7-Eleven 阅读(164) 评论(0) 推荐(0)

平行四边形

摘要：假如要制作平行四边形的按钮可以通过使用transform：skew（）变形的属性来对这个矩形进行斜向拉伸就能实现但是，一眼就能看出，里面的内容也跟着发生了拉伸现象。解决方案一：嵌套元素方案得到的效果如下很明显，问题得到了解决，但是意味着不得不添加额外的html元素，如果结构层不允许的，或阅读全文

posted @ 2016-07-02 23:05 7-Eleven 阅读(114) 评论(0) 推荐(0)

transition

摘要：transition:transition-property||transition-duration||transition-timing-function||transition-delay。主要包含这4个属性。 transition-property：none|all|<ident>.none 阅读全文

posted @ 2016-07-02 18:51 7-Eleven 阅读(166) 评论(0) 推荐(0)

transform

posted @ 2016-07-02 18:33 7-Eleven 阅读(151) 评论(0) 推荐(0)

box-shadow

摘要：box-shadow和textshadow我觉得差不多 box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。 box-shadow:inset(投影方式) x-offset(x轴偏移) y-offset（y轴偏移） blur-radiu 阅读全文

posted @ 2016-07-02 10:08 7-Eleven 阅读(125) 评论(0) 推荐(0)

text-shadow文字阴影

摘要：text-shadow：<length>(x轴） <length>(y轴) <shadow>(模糊半径) color（阴影颜色） length：长度值，可以是负值。用来指定阴影的延伸距离。其中X是水平偏移值，Y是垂直偏移值。x为正数值右边，y为正数值下边，负数相反。 <shadow>：阴影的模糊值，阅读全文

posted @ 2016-07-02 09:40 7-Eleven 阅读(169) 评论(0) 推荐(0)

linear-gradient线性渐变

摘要：linear-gradient线性渐变 linear-gradient:top(开始方向)||45deg(角度) color(开始颜色) color(结束颜色)。阅读全文

posted @ 2016-07-02 09:14 7-Eleven 阅读(136) 评论(0) 推荐(0)

rgba

摘要：rgba：r是红色。 g是绿色。 b是蓝色。 a是透明度。以上r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。。a参数，取值在0~1之间，不可为负值。 rgba是制作透明色，和opacity 的区阅读全文

posted @ 2016-06-30 21:11 7-Eleven 阅读(238) 评论(0) 推荐(0)

关于border-radius的个人理解

摘要：border-radius是制作边框圆角 border-radius的基本语法： <length>：由浮点数字和单位标识符组成的长度值。不可为负值。(px,%) border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没阅读全文

posted @ 2016-06-30 20:56 7-Eleven 阅读(343) 评论(0) 推荐(0)

随笔分类 - CSS3