CSS3

≡放荡痞女 提交于 2020-03-26 18:32:40

 

文本效果

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;  /*指定列之间的分隔竖线样式,缺省此属性时默认没有竖线分隔*/
}

 

 


 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!