CSS3

 

文本效果

1、text-shadow  文本阴影（艺术字）

h1{ text-shadow: 5px 5px 5px #FF0000; /*4个参数：水平阴影、垂直阴影、模糊的距离、阴影颜色*/ }

 

 

2、text-overflow   文本溢出

p{ text-overflow: clip; /*剪掉溢出的文本*/ text-overflow: ellipsis; /*用省略号...代替溢出的部分来显示，最常用*/ }

overflow可以处理所有的溢出，text-overflow专用于文本溢出。

我们可以在:hover伪类中设置overflow/text-overflow，当鼠标移到内容上时，显示全部|完整内容。

 

 

3、word-break   单词换行拆分方式

p{ word-break:break-all; /*如果换行处的单词过长，会拆分单词，并不会加连词线*/ word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/ word-break: normal; /*使用浏览器默认的换行符*/ }

 

 

 

 

边框

1、圆角边框

div{ border:1px solid red; border-radius:5px; /*设置圆角大小，数值越大，越圆*/ }

border-radius需要和border | backgroud-image | background-color配合使用，单独使用无效。

 

 

2、图片边框

p{ border-image: url("border.png") 30 30 round; }

最后一个参数指定图片的填充方式：stretch（拉伸）、repeat（重复，可能会出现残缺图片）、round（重复，自动调整，不会出现残缺图片），一般用round。

 

 

3、box-shadow   盒子阴影

div{ width:300px; height:100px; box-shadow: 10px 10px 5px #888888; /*参数：水平阴影位置、垂直阴影位置、模糊距离、阴影颜色，前三个参数支持负数*/ }

box-shadow可以脱离border属性单独使用，但盒子（块级元素）的宽、高要确定，所以一般要配合width、height使用。

 

 

 

 

transform     2d、3d变换

div{ transform:translate(50px,100px); }

transform即变换，在原位置的基础上进行变换，属性值指定进行哪种变换。

显示的直接就是变换的结果，并不显示变换的过程。

 

常用的2d变换：

transform: translate(50px,100px); /*平移，参数：水平平移距离、垂直平移距离，支持负数*/ transform: rotate(30deg); /*旋转，以左上角为基点，负数表示逆时针旋转*/ transform: scale(2,3); /* 缩放，参数：水平缩放倍数、垂直缩放倍数，小数形式 */

 

常用的3d变换：

transform: translate3d(x,y,z); /*3d平移*/ transform: rotate3d(x,y,z,angle); /*3d旋转*/ transform: scale3d(x,y,z); /* 3d缩放 */

 

都可以单独设置参数：

translateX(x) translateY(y) translateZ(z)

 

 

 

 

颜色渐变

1、线性渐变     在一个长方形区域朝着一个方向颜色渐变

#gradient { background: linear-gradient(to right, red , blue, grey); }

第一个参数指定渐变方向，后面是颜色变化，颜色个数可变。

#gradient { background: linear-gradient(to right, red , blue, grey); /*从左到右*/ background: linear-gradient(to bottom, red , blue, grey); /*从上到下*/ background: linear-gradient(to bottom right, red , blue, grey); /*左上到右下*/ background: linear-gradient(90deg, red , blue, grey); /*可使用角度*/ }

可缺省渐变方向，缺省时默认为从上到下。

颜色可使用rgba()来表示，这样可以将透明度使用进来。

 

 

2、径向渐变    从圆心向外渐变

#gradient { background: radial-gradient(circle, red 5%, green 15%, blue 60%); }

第一个参数设置渐变形状，可以是 circle （圆）、 ellipse（椭圆），可缺省，缺省时默认为 ellipse。

可以设置每种颜色占多大面积，数值可以缺省，缺省时默认每种颜色占的大小相同。

#gradient { background: radial-gradient(red, green, blue); }

渐变并没有形成动画。

 

 

 

 

transition   过渡

我们给一个元素设置了2种样式：

div{ width: 100px; height:100px; background-color: red; } div:hover{ width: 300px; height:300px; background-color: red; }

当鼠标移到<div>上去时，<div>的宽、高会一下子变为300px、300px，瞬时完成，几乎看不到过程。样式改变、2d|3d变换等，都是这样的。

 

transition可以给某些属性设置一个时间，当这些属性变化时，是在指定的时间内完成，这样我们就可以看到变化过程了，这也算一种动画。

div { width: 100px; height: 100px; background: red; transition: width 2s, height 2s, transform 2s; /*可指定多个属性，用逗号隔开即可*/ } div:hover { width: 300px; height: 300px; transform: rotate(180deg); }

 

可指定变化速度、开始时间：

transition: width 5s linear 2s;

 

一个属性变化有4个参数：属性名，在多少秒|毫秒内完成，变化速度，此属性开始变化的时间（2s后开始变化）。

后2个参数可缺省，缺省时默认为linear（匀速变化）、0s（立刻开始）。

可设置多个属性变化，逗号隔开即可。

变化速度常用的值：

linear   匀速ease   慢-快-慢ease-in    慢-快-匀速ease-out   匀速-慢

 

 

 

动画

动画就是元素从一种样式变为另一种样式的过程。

<style> div { width:100px; height:100px; background:red; animation:myAnimation 5s; /*指定动画名称、多少秒内完成*/ } @keyframes myAnimation /*动画名称*/ { 0% {background:red;} /*0%表示动画开始，100%表示动画结束*/ 50% {background:yellow;width:200px;height:200px} /*{}中写要变化的样式，可以有多个属性，分号隔开即可*/ 100% {background:green;width:100px;height:100px} } </style>

百分数可以是0%-100%之间的任意值。

animation:动画名称 多少时间内完成 变化速度 开始时间;

后2个参数可缺省。

 

上面的动画是自动开始的，一般我们是把动画和用户事件（比如鼠标移入、单击等）绑定在一起的：

<style> div { width:100px; height:100px; background:red; } div:hover{ animation:myAnimation 5s; } @keyframes myAnimation { 0% {background:red;} 50% {background:yellow;width:200px;height:200px} 100% {background:green;width:100px;height:100px} } </style> animation:myAnimation 5s;

 

 

 

 

多列

p{ column-count:3; /*将<p>中的内容分为3大列显示，列之间用一竖空白隔开*/ }

就像报纸上的多列一样。

 

可指定列之间的间距：

p{ column-count:3; 　　column-gap: 40px; /*指定列之间的间距*/ }

 

可指定列之间的分隔： p{ column-count:3; 　　column-gap: 40px; 　　column-rule: 1px solid lightblue; /*指定列之间的分隔竖线样式，缺省此属性时默认没有竖线分隔*/ }

 

 

 

转载于:https://www.cnblogs.com/chy18883701161/p/11332426.html

相关资源：连接二值图像中断开的点