Fork me on GitHub

写一些CSS3 (1)

有关于一些CSS3

图片的倒影

原来图片

后来图片

实现这样的效果

代码如下

-webkit-box-reflect:right 0px;
注释:below倒影 above上下 还有可选的参数有:

right left above below 可选参数(10px)距离

老版iphone 滑动解锁效果

文字描边

-webkit-text-stroke:宽度 颜色

文字模糊

text-shadow:
text-shadow: h-shadow v-shadow 模糊距离 color;

超出显示省略号

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

弹性盒模型

在使用弹性盒模型的时候

父元素必须要加:

display:-webkit-box;

-wibkit-box-origin定义盒模型的布局方向

horizontal水平显示

vertical垂直方向

-webkit-box-direction: reverse设置排列顺序

normal正序

reverse反序

-webkit-box-ordinal-group: 数字 设置自定义顺序

前面先找到元素

.box div:nth-of-type(number)

-webkit-box-flex 定义盒子的弹性空间

div:nth-of-type(1){-webkit-box-flex:1}

数字代表在盒子中占的份数 数字越大 占的比例越大

中间宽度固定 两侧宽度自适应

这个就可以用弹性盒模型来做

富裕空间管理

-webkit-box-pack对富裕空间进行管理

-webkit-box-pack:start所有元素在盒子左侧显示,富裕空间在右侧 这也是默认属性
显示在左侧

-webkit-box-pack:end所有元素在盒子右侧显示,富裕空间在左侧
显示在右侧

一个未知宽高的块元素如何在屏幕中水平居中?

-webkit-box-pack:center所有元素在盒子中间显示,富裕空间在两侧

显示在中央

一个盒子里平分富裕空间
-webkit-box-pack:justify所有元素平分富裕空间

平分富裕空间

-webkit-box-align在垂直方向上对元素的位置进行管理

-webkit-box-align:star 所有元素在据顶

垂直方向据顶

-webkit-box-align:end 所有元素在据底
垂直方向据底

一个未知宽高的块元素如何在屏幕中水平垂直显示?

-webkit-box-pack:center

-webkit-box-align:center

水平垂直显示

盒模型的手动拉升放大收缩

resize:both; overflow:auto;

resize 和 overflow 一起配合使用才可以

分栏 报纸的排版效果

注意:Internet Explorer 不支持 column-count 属性。

-webkit-column-count栏目列数

-webkit-column-width栏目宽度

-webkit-column-rule栏目间隔线

-webkit-column-gap栏目距离

间隔线样式

间隔线样式

text-indent:2em;
-webkit-column-width: 200px;
-webkit-column-count: 4 ;
-webkit-column-gap: 30px ;
-webkit-column-rule:4px 

分栏

transition 过度

运动时间 transition-duration

延迟时间 transition-delay

运动形式

ease 逐渐变慢 (默认值)

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

cubic-bezier 贝赛尔曲线(x1,y1,x2,y2)

贝勒斯曲线

-------------This is the endThank you for your reading-------------

本文标题:写一些CSS3 (1)

文章作者:Chen

发布时间:2017年09月19日 - 00:09

最后更新:2019年04月17日 - 13:04

原始链接:http://zhiweichen.com/2017/09/19/写一些CSS3/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。