CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

时间:2024-01-04 19:51:02

matrix

CSS3

1.  圆角

border-radius:边框圆角的圆角半径

四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值:第一个值为左上角与右下角,第二个值为右上角与左下角

一个值:四个圆角值相同

2.图片

border-image:有了CSS3的border-image属性,你可以使用图像创建一个边框:border-image属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:

border-image-source:用于指定要用于绘制边框的图片的位置;

border-image-slice:图像边界向内偏移;

border-image-width:图像的边界的宽度;

border-image-outset:用于指定在边框外部绘制 border-image-area 的量;

border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮。

3.阴影

box-shadow:边框阴影。例如  box-shadow: 50px 50px 5px #888888   第一个50px是指阴影距离边框的左右距离,值也可以是负的,向右为正,向左为负。第二个                                50px是指阴影边距离边框的上下距离,值也可以是负的,向下为正,向上为负。5px是距离上一个<div>的距离,距离越远,阴影面积就越大,也会越模                                   糊。#888888是指阴影的颜色。

4.背景

background-image   添加背景图片。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

background-size      指定背景图像的大小。CSS3中可以指定背景图片,可以在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。指定的大小是相对于父元                                     素的宽度和高度的百分比的大小。

background-Origin    属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

background-clip      背景剪裁属性是从指定位置开始绘制

5.渐变

渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变:(Linear Gradients)- 向下/向上/向左/向右/对角方向

例如:

background: -webkit-linear-gradient(red, blue); 
                             background: -o-linear-gradient(red, blue); 
                             background: -moz-linear-gradient(red, blue);
                             background: linear-gradient(red, blue);

上面代码表示从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。

径向渐变:(Radial Gradients)- 由它们的中心定义

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

shape: 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值:

closest-side

farthest-side

closest-corner

farthest-corner

6.文本效果

text-shadow:文本阴影。 text-shadow: 5px 5px 5px #FF0000    和边界阴影效果相同

box-shadow:盒子阴影   box-shadow: 10px 10px 5px grey

text-overflow:文本溢出

word-wrap:break-word;文本换行

Word Breaking:指定换行规则

7.字体

CSS3中,设计网页时可以使用任意字体,在使用之前必须首先定义字体的名称(比如 myFirstFont),然后再通过 font-family 属性来引用字体的名称 (myFirstFont)。

8.  2D转换

2D转换是指可以移动,比例化,反过来,旋转,和拉伸元素。2D转换的方法有:

translate(); translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

例如 <div style="width:300px;height:100px; -webkit-transform:translate(100px,100px)">表示向右方、下方各移动了100px。

rotate();  rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

例如  <div style="width:300px;height:100px; -webkit-transform:rotate(30deg)">表示顺时针倾斜了30度。

scale();  scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

例如  <div style="width:300px;height:100px; -webkit-transform:scale(2,3)">  表示x轴扩大了2倍,y轴扩大了3倍。

skew(); skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:

例如   <div style="width:300px;height:100px; -webkit-transform:skew(30deg,20deg);">   表示绕X轴和Y轴周围20度30度的元素。

matrix();    matrix方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

例如   <div style="width:300px;height:100px; -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);">  表示利用matrix()方法旋转div元素30°

9.  3D转换

rotateX(); 围绕其在一个给定度数X轴旋转的元素。

例如  <div style="width:300px;height:100px; -webkit-transform: rotateX(60deg);"></div>  表示围绕X轴旋转60度,好比60度时在X平面的投影。

rotate(Y) 和  rotateX() 效果一样

10.过渡

过渡是元素从一种样式逐渐改变为另一种的效果。

例如  <div style="width:300px;height:100px; -webkit-transition: width 2s;">如果未指定的期限,transition将没有任何效果,因为默认值是0。指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:

过渡效果代码未打出

要添加多个样式的变换效果,添加的属性由逗号分隔:

{-webkit-transition: width 2s, height 2s, -webkit-transform 2s;}

11.动画

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。要创建CSS3动画,你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

-webkit-keyframes myfirst /* Safari and Chrome */
               {
                      0%   {background: red;}
                      25%  {background: yellow;}
                      50%  {background: blue;}
                      100% {background: green;}
               }

改变背景色和位置:

-webkit-keyframes myfirst /* Safari and Chrome */
                 {
                      0%   {background: red; left:0px; top:0px;}
                      25%  {background: yellow; left:200px; top:0px;}
                      50%  {background: blue; left:200px; top:200px;}
                      75%  {background: green; left:0px; top:200px;}
                      100% {background: red; left:0px; top:0px;}
                  }

12.多列

column-count 属性指定了需要分割的列数。-webkit-column-count: 3;表示将 <div> 元素中的文本分为 3 列。

column-gap 属性指定了列与列间的间隙。-webkit-column-gap: 40px;表示列与列之间的距离是40像素。

    column-rule-style 属性指定了列与列间的边框样式:-webkit-column-rule-style: solid;表示列与列之间是实线。

column-rule-width 属性指定了两列的边框厚度:-webkit-column-rule-width:10px; 表示列与列之间实线的宽度是10px

    column-rule-color 属性指定了两列的边框颜色

column-rule 属性是 column-rule-* 所有属性的简写。-webkit-column-rule: 1px solid lightblue;表示列之间的边框的厚度,样式及颜色。

-webkit-column-span表示指定元素跨多少列。h2{-webkit-column-span: all;}表示标题h2跨越多有的列。

     column-width 属性指定了列的宽度。-webkit-column-width: 100px;表示列的宽度为100px。

13.用户界面

resize属性指定一个元素是否应该由用户去调整大小。div{ resize:both; overflow:auto;}  表示这个 div 元素由用户调整大小。

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。-moz-box-sizing: border-box;width:50%; float:left;  表示div分成了2个,各占50%。

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。div
                            div{
                                   border:2px solid black;
                                   outline:2px solid red;
                                   outline-offset:15px;
                             }

上面代码表示边框边缘之外 15 像素处的轮廓。

14.图片

椭圆形图片:border-radius: 50%;  圆角为边界的50%时,图片就变成了椭圆。

略缩图:使用 border 属性来创建缩略图

影响式图片:响应式图片会自动适配各种尺寸的屏幕。 如果你需要*缩放图片,且图片放大的尺寸不大于其原始的最大值,则可使用以下代码:

img {
                                        max-width: 100%;
                                        height: auto;
                                    }

图片文本:可以将文本写在图片的左上角、左下角、右上角、右下角、居中。(代码未写出)

卡式图片:

图片滤镜: filter 属性用为元素添加可视效果 (例如:模糊与饱和度) 。-webkit-filter: grayscale(100%);表示修改所有图片的颜色为黑白 (100% 灰度)。

响应式图片相册:

图片Modal(模态):

15.按钮

按钮颜色: background-color     .button1 {}

按钮大小:font-size     .button1 {font-size: 10px;}

图角按钮: border-radius    .button5 {border-radius: 50%;}

按钮边框颜色: border      border: 2px solid #4CAF50;

鼠标悬停按钮:可以使用hover 选择器来修改鼠标悬停在按钮上的样式。

效果速度:transition-duration    -webkit-transition-duration: 0.4s;表示效果速度是0.4s。

.button:hover {

color: white;

}

上面代码表示按钮的颜色是白色,当把鼠标放在按钮上0.4s以后,按钮变成#4CAF50(绿色)。

按钮阴影: box-shadow   表示鼠标放在按钮上以后按钮会显示阴影。

禁用按钮:opacity

.disabled {
                                      opacity: 0.6;
                                      cursor: not-allowed;
                                      }

上面代码表示禁用按钮,鼠标放在按钮上以后显示一个禁用的图片(not-allowed)。

按钮宽度:width   button1 {width: 250px;}  表示宽度为250px的按钮。  button2 {width: 50%;}  宽度为50%的按钮。

按钮组:移除外边距并添加 float:left 来设置按钮组:   button { float: left;}

按钮动画:

16.分页

简单分页:

圆角样式:border-radius

鼠标悬停过渡效果: transition

圆角边框:

分页间隔: margin

分页字体大小:font-size

居中分页:在容器元素上 (如 <div>) 添加 text-align:center 样式