CSS3与页面布局学习总计,深切通晓

深切领会 background-position 中的百分比

2015/11/02 · CSS

本文由 伯乐在线 –
risker
翻译。未经许可,禁止转发!
英文出处:vjeux。欢迎参与翻译组。

经过那篇作品我要教大家解决一个早就很困扰自己的劳累问题。大家要使用比例的
background-position值来缓解一些难题。

一、边框样式

一、边框样式

CSS3在CSS2.1的功底上新增添了广大特性,那里采纳了较常用的一对功效与咱们大快朵颐,协助文档中有很详细的描述,可以在本文的示范中取得匡助文档。

日常使用方法

  1. 布置图片
    常常在容器里布署图片是交给具体图片的topleft相对容器的topleft的值。
    亚洲必赢官网 1
  2. CSS3与页面布局学习总计,深切通晓。在CSS中很简单形成。
JavaScript

\* 在容器里使用\`<img>\`标签 .container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010c3463746966-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010c3463746966-1" class="crayon-line">
    *   在容器里使用`&amp;amp;amp;lt;img&amp;amp;amp;gt;`标签
</div>
<div id="crayon-5b8f6d12010c3463746966-2" class="crayon-line crayon-striped-line">
.container{
</div>
<div id="crayon-5b8f6d12010c3463746966-3" class="crayon-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


`</pre> position:relative; } .container img{ position:absolute; top:12px; left:20px; }`  


JavaScript

\* 或者可以使用\`background-position\`&lt;pre&gt;\`.container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010cc478883379-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010cc478883379-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010cc478883379-1" class="crayon-line">
*   或者可以使用`background-position`&amp;lt;pre&amp;gt;`.container{
</div>
<div id="crayon-5b8f6d12010cc478883379-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


background-position:12px 20px; }\`
  1. 在容器里活动现在你想让图片在容器里面移动同时还不可能超过容器边界。你势必是要不难算一算图片topleft的最大值。亚洲必赢官网 2接下来拿走left值的限量是
    0 到 container_width - image_width,同样也足以拿走top值的界定。
  2. 图形比容器大到如今为止,我们谈论的标题都很简短。现在,我们要看看图片比容器大的情形。容器必要求被图片填满。亚洲必赢官网 3同一大家得以算出left值的限制是
    0 ~
    container_width - image_width,只但是本次container_width - image_width
    是负值。你可以搞领会正值和负值的涉及,也足以凭直觉搞定。当你看来12px 20px你很不难通晓图片是怎么放置的。不过,你看来-12px -20px就比较难想清楚了。
  3. 不变量好了,现在您早已写好了地方点并且没有其余难点。现在,因为一些原因,我们不用长方形容器了,用正方形容器。那么从前的那几个地方值就不那么适合了。大家事先统计的值不再灵光,因为明天景色变了。你想要改变图片和容器大小也是同样的道理。亚洲必赢官网 4可以从图中来看,如若使用固定的值,那么只要改变一些原则,那么就可能会让一度写好的布局乱掉。

    背景图片的比例方法

  4. 概念大家要换一个确定图片地点的格局了。当图片的右边框和容器的右侧框挨着时,left0%。当图片左侧框和容器的出手框挨着时,left100%。这五个例子分别就是
    0% 和 100%
    的气象:亚洲必赢官网 5咱们很简单得到两者之间的值

JavaScript

\`left = (container\_width - image\_width) \* percentage

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d1355851788-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d1355851788-1" class="crayon-line">
`left = (container_width - image_width) * percentage
</div>
</div></td>
</tr>
</tbody>
</table>


 
  1. 限制检测那一个法子最便宜的就是大家不要再算图片绝对容器的限制。它就是 0
    ~ 100 。
  2. 不变量大家画八个轴,一个对于容器,一个对于图片。如果大家设置值为60%,则多少个轴的60%会重合在一个点上。亚洲必赢官网 6就好像上边的图形相同,这么些新的措施在不相同比例大小景况下也工作得很好。
  3. 水平和垂直若是你细心的话你会专注到图片和容器一样大的话,多少个轴会完全重叠。设置
    30% 仍然 80%
    都不主要。亚洲必赢官网 7再看看数学公式
JavaScript

\`left = (container&lt;em&gt;width - image\_width) &lt;/em&gt;
percentage = 0 \_ percentage = 0

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d5992620587-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d5992620587-1" class="crayon-line">
`left = (container&lt;em&gt;width - image_width) &lt;/em&gt; percentage = 0 _ percentage = 0
</div>
</div></td>
</tr>
</tbody>
</table>

您只须要安装四个值lefttop就行了。

1、border:复合属性。设置对象边框的特性。

1、border:复合属性。设置对象边框的表征。

一、阴影

总结

一初步,我平昔不了解百分比率是怎么对background-position意义的。我实在有点迷惑,因为运用百分比让我无法直观地感受到变化。可是,后来自己发觉选拔比例化解图片定位是但是方便的。

我的博客,欢迎订阅

微博粉丝太少,求粉

1 赞 3 收藏
评论

  取值:

  取值:

1.1、文字阴影

text-shadow
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来安装对象的影子垂直偏移值。可以为负值
<length>③:
要是提供了第3个长度值则用来设置对象的阴影模糊值。分歧意负值
<color>: 设置对象的黑影的水彩。

以身作则代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text{
                font: bold 100px/1.5 georgia, sans-serif;
                color: dodgerblue;
                text-shadow: 10px 10px 50px #000;
                /*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
            }
        </style>
    </head>
    <body>
        <div class="text">
            Shadow Text
        </div>
    </body>
</html>

运作效果:

 亚洲必赢官网 8

示范代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            body {
                background: #000;
                color: #fff;
            }
            .neon{
                font: bold 100px/1.5 georgia, sans-serif;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
            }
        </style>
        <div class="neon">
            Hello NEON Text
        </div>
    </body>
</html>

 

运作结果:

亚洲必赢官网 9

关于小编:risker

亚洲必赢官网 10

二零一四年大学结束学业,现在在京城某网络集团从事前端开发的工作,近四个月第一做活动web开发。天涯论坛粉丝太少,求粉。

个人主页 ·
我的稿子 ·
7 ·
  

亚洲必赢官网 11

  border-width: 设置或探寻对象边框宽度。

  border-width: 设置或探寻对象边框宽度。

1.2、盒子阴影

box-shadow
<length>①: 第1个长度值用来安装对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来安装对象的黑影垂直偏移值。可以为负值
<length>③:
借使提供了第3个长度值则用来安装对象的影子模糊值。不容许负值
<length>④:
若是提供了第4个长度值则用来安装对象的阴影外延值。能够为负值
<color>: 设置对象的黑影的水彩。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的黑影类型为外阴影

亚洲必赢官网 12

以身作则代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow1{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
            }
            .shadow2{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 0 0 30px 0 #1E90FF;
            }
        </style>
    </head>
    <body>
        <p>
        <img src="img/7.jpg" class="shadow2"/>
        </p>
    </body>
</html>

运作效果:

亚洲必赢官网 13

练习:

亚洲必赢官网 14

亚洲必赢官网 15

亚洲必赢官网 16

  border-style: 设置或探寻对象边框样式。

  border-style: 设置或探寻对象边框样式。

二、背景

  border-color: 设置或探寻对象边框颜色。

  border-color: 设置或探寻对象边框颜色。

2.1、背景图像尺寸

background-size:指定对象的背景图像的尺码大小

background-size:<bg-size> [ , <bg-size> ]* 

<bg-size> = [ <length> | <percentage> | auto ]{1,2}
| cover | contain

<length>: 用长度值指定背景图像大小。分歧意负值。
<percentage>: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真正大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能不止容器。
contain:
将背景图像等比缩放到步长或可观与容器的大幅度或可观相等,背景图像始终被含有在容器内。

示范代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 500px;
                height: 300px;
                border: 10px solid rgba(0,0,255,.3);
                margin: 100px;

                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                /*background-size:100px 50px;*/
                /*background-size:contain;*/
            }
        </style>
    </head>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

运行结果:

亚洲必赢官网 17

亚洲必赢官网 18

#border4
 {
      width: 100px;
      height: 100px;
      border:1px solid #FF0000;
 }

<div id="border4"></div>
#border4
 {
      width: 100px;
      height: 100px;
      border:1px solid #FF0000;
 }

<div id="border4"></div>

2.2、背景图像突显的原点

background-origin:指定对象的背景图像显示的原点。

background-origin:<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box: 从padding区域(含padding)初步显示背景图像。
border-box: 从border区域(含border)初步浮现背景图像。
content-box: 从content区域开首显得背景图像。

演示代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 400px;
                height: 200px;
                border: 20px solid rgba(0,0,255,.2);
                margin: 100px;
                padding: 20px;

                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                background-origin:padding-box;
            }
        </style>
    </head>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

 border-box效果:

亚洲必赢官网 19

 content-box效果:

亚洲必赢官网 20

padding-box效果:(默认)

亚洲必赢官网 21

 

 

三、伪元素

伪元素不是真的元素是由此CSS虚拟出的一个因素,CSS3的语法为了差别伪元素与伪类,使用“::”表示,然而早期为了同盟“:”照旧可以应用。

 

 

3.1、before

在运用样式的元素内的前部虚拟一个因素得以指定元素的内容与体制。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                margin: 100px;
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }

            #div1:before {
                content: '这是before伪元素的内容';
                display: block;
                color: white;
                background: lightgreen;
            }

            #link1:before {
                content: attr(href);
            }

            #link2:before {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客园</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">张果 - 博客园</a>
        </p>
    </body>

</html>

效果:

亚洲必赢官网 22

在下边的示范中伪元素可以算作一个例行的要素写所有样式,attr可以取出元素的习性,img可以指定图片。

2、border-width:设置对象的边框宽度。  

2、border-width:设置对象的边框宽度。  

3.2、after

after也是一个与before类似的伪元素,分歧的是她的岗位是在中间的尾部,示例如下:

亚洲必赢官网 23亚洲必赢官网 24

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }

            #div1:after {
                content: '这是before伪元素的内容';
                display: block;
                color: white;
                background: lightgreen;
            }

            #link1:after {
                content: attr(href);
            }

            #link2:after {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客园</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">张果 - 博客园</a>
        </p>
    </body>

</html>

View Code

运转效果:

亚洲必赢官网 25

 注意:

a)、本质上并不协助伪元素的双冒号(::)写法,而是忽略掉了中间的一个冒号,仍以单冒号来分析,所以同样变相支持了E::after。
b)、不协理设置属性position, float,
list-style-*和局地display值,Firefox3.5起初收回这个限制。
c)、IE10在利用伪元素动画有一个难题:
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */
}必要动用一个空的:hover来激活

  取值:

  取值:

3.3、清除浮动

方法一:

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

方法二:

            .clearfix {
                *zoom: 1;
                /*在旧版本的IE浏览器缩放大小,触发haslayout(类似BFC)*/
            }

            .clearfix:after {
                /*伪元素,在应用该元素后添加一个伪元素*/
                content: "";
                /*内容为空*/
                display: table;
                /*BFC,清除内部浮动*/
                clear: both;
                /*清除外部浮动*/
            }

  meadium:  定义默认厚度的边框

  meadium:  定义默许厚度的边框

四、圆角与边框

圆角可能是我们最急迫需求的CSS3样式了,在CSS2.1中想尽种种艺术都不算赏心悦目,落成格局如下:

    thin:  定义比默许厚度细的边框。

    thin:  定义比默许厚度细的边框。

4.1、border-radius 圆角

border-radius:[ <length> | <percentage> ]{1,4} [ / [
<length> | <percentage> ]{1,4} ]?

<length>: 用长度值设置对象的圆角半径长度。不容许负值
<percentage>: 用百分比设置对象的圆角半径长度。不容许负值

此处有两部分,第四个角度是水平角度,首个角度是垂直角度。

a)、提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默许等于第1个参数
b)、水平半径:倘诺提供全方位两个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的逐条效率于七个角。
c)、假诺只提供一个参数,将用于所有的于八个角。
d)、假如提供四个,第二个用于上左(top-left)、下右(bottom-right),第一个用于上右(top-right)、下左(bottom-left)。
e)、如果提供多个,第四个用于上左(top-left),首个用于上右(top-right)、下左(bottom-left),第多少个用于下右(bottom-right)。
垂直半径也遵守以上4点。 对应的剧本特性为borderRadius。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                margin: 100px;
                padding: 10px;
                border: 5px solid lightgreen;

                /*border-radius: 20px;  4个角水平与垂直都为10px*/

                 /*border-radius: 30px 0 30px 0;  上右下左4个角*/

                /*border-radius: 190px; 4个角圆角是高宽一半*/

                border-radius: 165px 105px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        border-radius: 165px 105px;
        </div>
    </body>
</html>

效果:

亚洲必赢官网 26

亚洲必赢官网 27

亚洲必赢官网 28

亚洲必赢官网 29

亚洲必赢官网 30

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius 圆角</title>
        <style type="text/css">
            #div1{
                width: 300px;
                height:300px;
                margin: 100px;
                background: #0066CC;

                border-radius: 150px 100px 10px 100px/60px 100px 90px 100px;
            }
        </style>
    </head>
    <body>
        <h2>border-radius 圆角</h2>


        <div id="div1"></div>
    </body>
</html>

结果:

亚洲必赢官网 31

 

  thick:  定义比默许厚度粗的边框。

  thick:  定义比默许厚度粗的边框。

4.2、边框图片border-image

border-image:<‘ border-image-source ‘> || <‘
border-image-slice ‘> [ / <‘ border-image-width ‘> | / <‘
border-image-width ‘>? / <‘ border-image-outset ‘> ]? || <‘
border-image-repeat ‘>

<‘ border-image-source ‘>:
设置或探寻对象的边框是还是不是用图像定义样式或图像来源路径。
<‘ border-image-slice ‘>:
设置或探寻对象的边框背景图的剪切形式。
<‘ border-image-width ‘>: 设置或探寻对象的边框厚度。
<‘ border-image-outset ‘>: 设置或探寻对象的边框背景图的壮大。
<‘ border-image-repeat ‘>: 设置或探寻对象的边框图像的平铺格局。

亚洲必赢官网 32

亚洲必赢官网 33

亚洲必赢官网 34

图形剪裁地方(border-image-slice)
1、没有单位,专指像素。那类似于flash的as脚本,舞台高宽,影片剪辑大小,位移直接就是一个数值,没有单位,因为默许单位即使像素(px)了。例如:border-image:url(border.png)
27 repeat;那里的27专指27像素。

亚洲必赢官网,2、辅助百分比率,百分比率大小事相对于边框图片而言,即使边框图片大小为400px*300px,则20%的实际效果就是剪裁了图片的60px
80px 60px 80px的四边大小。

重复性(border-image-repeat)
此处的重复性有别于background的背景重复,差异较大。background图片就是重复,不另行,水平重新,垂直重复,同理可得就是围绕repeat(重复)这几个词打转,一家独大。而对此border-image,可谓是三足鼎峙,repeat(重复)只是内部之一,其他八个是round(平铺)和stretch(拉伸)。其中,stretch是默认值。

参数0~2个,0则使用默许值 –
stretch,例如:border-image:url(border.png) 30% 40%;就同一border-image:url(border.png) 30% 40% stretch stretch;;1则意味着水平方向及垂直方向均采取此参数;2个参数的话则率先个参数表水平方向,首个参数表示垂直方向。例如:border-image:url(border.png) 30% 40%;就一律border-image:url(border.png) 30% 40% round repeat;表示水平方向round(平铺),垂直方向repeat(重复),至于何为平铺何为重新上面会深深讲解。

详解:

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 167px;
                margin: 100px;
                padding: 10px;
                border: 27px solid lightgreen;

                border-image: url(img/border.png);
                border-image-slice: 27;
            }
        </style>
    </head>
    <body>
        <div id="div1">
                border-image: url(img/border.png);<br/>
                border-image-slice: 27;<br />
        </div>

    </body>
</html>

效果:

亚洲必赢官网 35

亚洲必赢官网 36

 ★ 若是提供任何七个参数值,将按上、右、下、左的各类效用于四边。

 ★ 如若提供所有多少个参数值,将按上、右、下、左的顺序功效于四边。

五、变形 transform

CSS3中动用transform对元素举行变形,可以是2D的也可以是3D(效果)的,transform的参数有成百上千,多数是函数的款型,具体如下:

transform:none | <transform-function>+

2D Transform Functions:
matrix():
以一个含六值的(a,b,c,d,e,f)变换矩阵的样式指定一个2D转移,相当于直接使用一个[a,b,c,d,e,f]转换矩阵
translate(): 指定对象的2D
translation(2D运动)。首个参数对应X轴,第三个参数对应Y轴。若是第四个参数未提供,则默许值为0
translatex(): 指定对象X轴(水平方向)的活动
translatey(): 指定对象Y轴(垂直方向)的移动
rotate(): 指定对象的2D
rotation(2D筋斗),需先有 <‘ transform-origin ‘> 属性的概念
scale(): 指定对象的2D
scale(2D缩放)。首个参数对应X轴,第三个参数对应Y轴。假如第四个参数未提供,则默许取第四个参数的值
scalex(): 指定对象X轴的(水平方向)缩放
scaley(): 指定对象Y轴的(垂直方向)缩放
skew(): 指定对象skew
transformation(斜切扭曲)。第三个参数对应X轴,第三个参数对应Y轴。即使第三个参数未提供,则默许值为0
skewx(): 指定对象X轴的(水平方向)扭曲
skewy(): 指定对象Y轴的(垂直方向)扭曲 3D Transform Functions:
matrix3d(): 以一个4×4矩阵的款式指定一个3D转移
translate3d():
指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不容许省略
translatez(): 指定对象Z轴的移位
rotate3d():
指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数差别意省略
rotatex(): 指定对象在x轴上的团团转角度
rotatey(): 指定对象在y轴上的团团转角度
rotatez(): 指定对象在z轴上的转动角度
scale3d():
指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
scalez(): 指定对象的z轴缩放
perspective(): 指定透视距离

   
 如若只提供一个,将用来所有的四边。

   
 如若只提供一个,将用来所有的四边。

5.1、rotate()2D旋转

transform:rotate(<angle>)

angle是角度的情致,单位可以是:

deg  度(Degrees)
grad 梯度(Gradians)
rad   弧度(Radians)
turn  转、圈(Turns)

示例:

亚洲必赢官网 37亚洲必赢官网 38

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: rotate(45deg);
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
        transform: rotate(45deg);
    </body>

</html>

View Code

效果:

亚洲必赢官网 39

   
 即使提供三个,第四个用于上、下,第一个用于左、右。

   
 假若提供四个,首个用于上、下,第三个用于左、右。

5.2、设置原点 transform-origin 

transform-origin用于安装变形时的原点,从5.1得以观看转动时默认的原点在着力,那里运用该属性修改原点地方。

transform-origin:[ <percentage> | <length> | left | center
| right ] [ <percentage> | <length> | top | center |
bottom ]
默许值:50% 50%,效果等同center center

transform-origin:水平(left | center | right) 垂直(top | center |
bottom)

示例:

亚洲必赢官网 40亚洲必赢官网 41

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: rotate(30deg);
                transform-origin: left top;
                /*旋转的原点为左上角*/
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

View Code

效果:

亚洲必赢官网 42

诚如情状下我们会在9个关键点转动,也足以使用具体的数字指定一个特有的地点。

   
 若是提供多个,第四个用于上,第一个用于左、右,首个用于下。

   
 倘使提供多个,第二个用于上,首个用于左、右,第多个用于下。

5.3、平移 translate() 

transform:translate(x,y) =
translate(<translation-value>[,<translation-value>]?),指定对象的2D
translation(2D运动)。第三个参数对应X轴,首个参数对应Y轴。若是第四个参数未提供,则默许值为0

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: translate(50%,-50px);
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果:

亚洲必赢官网 43

可以利用该措施完毕垂直居中,要求运用一定。

  也得以分级对四边设置边框:

  也得以独家对四边设置边框:

5.4、缩放 scale

transform:scale(x,y)

scale(): 指定对象的2D
scale(2D缩放)。第三个参数对应X轴,第一个参数对应Y轴。若是首个参数未提供,则默许取第三个参数的值

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: scale(0.5,1.5);  /*宽度缩小到1半,高度放大到1.5倍*/
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果:

亚洲必赢官网 44

    border-top-width
设置上面框宽度

    border-top-width
设置上面框宽度

5.5、斜切扭曲skew 

transform:skew(x,y): 指定对象skew
transformation(斜切扭曲)。第三个参数对应X轴
角度,第四个参数对应Y轴角度。若是第三个参数未提供,则默许值为0 

示例:

x30度角时效果:

亚洲必赢官网 45

y30度角时效果:

亚洲必赢官网 46

x30度角,y30度角时的意义:

亚洲必赢官网 47

练习1:

亚洲必赢官网 48

只同意一个div,可以选用CSS3

练习2:

请完成如下效果,可以利用CSS3

亚洲必赢官网 49

亚洲必赢官网 50

亚洲必赢官网 51

亚洲必赢官网 52

亚洲必赢官网 53亚洲必赢官网 54

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 200px;
                background: lightblue;
                font: 43px/200px "microsoft yahei";
                color: darkblue;
                text-align: center;
                margin: 0 auto;
                text-shadow: 0 1px 1px #fff;
                position: relative;
            }

            .box:before,
            .box:after {
                content: ' ';
                position: absolute;
                bottom: 10px;
                left: 5px;
                width: 50%;
                height: 20%;
                box-shadow: 0 10px 20px #ccc;
                transform: rotate(-3deg);
                z-index: -1;
            }

            .box:after {
                left: auto;
                right: 5px;
                transform: rotate(3deg);
            }
        </style>
    </head>

    <body>
        <div class="box">
            Hello World By CSS3
        </div>
    </body>

</html>

View Code

    border-bottom-width
设置上面框宽度

    border-bottom-width
设置上边框宽度

六、渐变

在初期IE浏览中的滤镜中就有渐变,Photoshop中也有渐变,可概括的认为渐变就是颜色的平整过度,CSS3的渐变语法如下:

<linear-gradient> = linear-gradient([ [ <angle> | to
<side-or-corner> ] ,]? <color-stop>[,
<color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> |
<percentage> ]?

<angle>: 用角度值指定渐变的来头(或角度)。
to left: 设置渐变成从右到左。相当于: 270deg
to right: 设置渐变从左到右。相当于: 90deg
to top: 设置渐变从下到上。相当于: 0deg
to bottom: 设置渐变从上到下。相当于:
180deg。那是默许值,等同于留空不写。 <color-stop>
用于指定渐变的起止颜色:
<color>: 指定颜色。
<length>: 用长度值指定起止色地点。不相同意负值
<percentage>: 用百分比指定起止色地点。

潜移默化一般选择于要求指定颜色的地方。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .box {
                height: 200px;
                width: 200px;
                float: left;
                margin: 20px;
            }
            #div1{
                background: linear-gradient(orange,navy);
                /*从上到下橙色到蓝色渐变*/
            }
            #div2{
                background: linear-gradient(lightgreen,lightcoral 40%,lightblue);
                /*绿红蓝从上到下渐变,中间的40%表示红出现的位置,如果不指定则均匀分配*/
            }

            #div3{
                background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
                /*0度角方向(从下向上)*/
            }

            #div4{
                background: linear-gradient(45deg,blue,pink);
                /*目标方向45度角方向*/
            }

            #div5{
                background: linear-gradient(to top left,#000,#fff);
                /*从右下到左上的渐变*/
            }
            span{
                font: 50px/50px "microsoft yahei";
                color: linear-gradient(to left,red,blue);
                /*前景色无效,背景有效*/
            }
        </style>
    </head>

    <body>
        <div class="box" id="div1">
        </div>
        <div class="box" id="div2">
        </div>
        <div class="box" id="div3">
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>

            Hello Linear-Gradient

    </body>
</html>

效果:

亚洲必赢官网 55

设若要考虑兼容IE浏览器,可以利用IE中有意识的滤镜。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', grandientType=1);
/** IE7 **/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', grandientType=1);
/** IE8 **/

 

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="orange", EndColorStr="navy");
/*老IE中的渐变*/

IE中常用的滤镜:

亚洲必赢官网 56亚洲必赢官网 57

透明效果:filter:alpha(opacity=50);

黑白照片:filter: gray;

X光照片:filter: Xray;

风动模糊:filter: blur(add=true,direction=45,strength=30);

正弦波纹:filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果:filter: Alpha(Opacity=50);

线型透明:filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);

放射透明:filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);

白色透明:filter: Chroma(Color=#FFFFFF);

降低色彩:filter: grays;

底片效果:filter: invert;

左右翻转:filter: fliph;

垂直翻转:filter: flipv;

投影效果:filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);

马赛克:filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

发光效果:filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔边效果:filter:alpha(opacity=100, finishOpacity=0,style=2;

许多 Filter 中的特效均已进入了 CSS3 草案,并在新版的非 IE 浏览器中得到了很好的支持。

View Code

    border-left-width
设置左侧框宽度

    border-left-width
设置右边框宽度

七、透明

    border-right-width
设置左侧框宽度

    border-right-width
设置右侧框宽度

7.1、opacity

安装对象的不透明度。

opacity:<number>

<number>:
使用浮点数指定对象的不透明度。值被封锁在[0.0-1.0]范围内,若是跨越了那个范围,其计算结果将截取到与之最相仿的值。
0表示完全透明,1意味着完全不透明。

示例:

            .box {
                height: 180px;
                width: 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }
            #div1{
                opacity: 0.5;  /*设置半透明*/
                filter:alpha(opacity=50); /*兼容IE,使用滤镜,0-100 */
                background: blue;
                height: 100px;
            }

        <div class="box">
            <div id="div1">
            </div>
        </div>

效果:

亚洲必赢官网 58

<style>            
    #border1{
    width:200px;
    height:100px;
    border:solid;
    /*border-width: 5px;*/
    border-width:2px 3px 4px 5px ;                
            }
</style>

<div id="border1"></div>
<style>            
    #border1{
    width:200px;
    height:100px;
    border:solid;
    /*border-width: 5px;*/
    border-width:2px 3px 4px 5px ;                
            }
</style>

<div id="border1"></div>

7.2、transparent与图片透明

用来指定全透明色彩
transparent是全透明蓝色(black)的速记法,即一个好像rgba(0,0,0,0)那样的值。
在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
在CSS2中,border-color也先导收受transparent作为参数值,《Open eBook(tm)
Publication Structure
1.0.1》[OEB101]拉开到color也经受transparent作为参数值。
在CSS3中,transparent被拉开到其余一个有color值的质量上。

    color: transparent;
    border: 1px solid transparent;
    background: transparent;

广阔互连网图片格式,压缩格式:

gif:只255种颜色,透明,动画效果

jpg:色彩丰裕(65536),不透明,不援救动画

png:色彩越来越助长,支持透明,不援救动画

亚洲必赢官网 59

 

 

7.3、RGBA

RGBA是CSS3中新增用于安装颜色的方法,语法:

RGBA(R,G,B,A)
取值:
R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
A: Alpha透明度。取值0 – 1之间。

此色彩情势与RGB相同,只是在RGB形式上增产了Alpha透明度。
IE6.0-8.0不支持接纳 rgba 形式完成透明度,可选取 IE 滤镜处理,如:

filter:
progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);

示例:

            #div3 {
                /*兼容IE,使用滤镜,0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }

        <div class="box">
            <div id="div3">
            </div>
        </div>

效果:

亚洲必赢官网 60

代码:

亚洲必赢官网 61亚洲必赢官网 62

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .box {
                height: 180px;
                width: 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }

            #div1 {
                opacity: 0.5;
                /*设置半透明*/
                filter: alpha(opacity=50);
                /*兼容IE,使用滤镜,0-100 */
                background: blue;
                height: 100px;
            }

            #div2 {
                background: url(img/border.png);
                height: 160px;
                width: 280px;
                border: 10px solid transparent;
                background-origin: content-box;
            }

            #div3 {
                /*兼容IE,使用滤镜,0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }

            #div4 {}

            #div5 {}
        </style>
    </head>

    <body>
        <div class="box">
            <div id="div1">
            </div>
        </div>
        <div class="box">
            <div id="div2">
            </div>
        </div>
        <div class="box">
            <div id="div3">
            </div>
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>
    </body>

</html>

View Code

结果:

亚洲必赢官网 63

作业:

请达成如下效果,要求包容IE8:

亚洲必赢官网 64

 

 

八、动画

前者可以行使javascript已毕部分简练的动画,可是有很大局限;jQuery解决了一些难点,对于一些小的动画片jQuery表示不错,但复杂的连接效果也不知道该如何是好;CSS3中引入了2种动画效果表现不错,分别是过渡动画与帧动画。

3、border-color:设置或探寻对象的边框颜色

3、border-color:设置或探寻对象的边框颜色

8.1、过渡动画

紧接动画可粗略明了为是从一个气象过渡到另一个景观间自动生成的动画效果,相对简单。

transition语法:

transition:<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property>
] || <time> || <single-transition-timing-function> ||
<time>

<‘ transition-property ‘>: 检索或设置对象中的参加对接的属性
<‘ transition-duration ‘>: 检索或安装对象过渡的持续时间
<‘ transition-timing-function ‘>:
检索或设置对象中连着的卡通片类型
<‘ transition-delay ‘>: 检索或安装对象延迟过渡的时间

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            body {
                padding: 100px;
            }

            #img1 {
                /*所有过渡动画的时间都为1秒*/
                transition: all 1s;
            }

            #img1:hover {
                transform: rotate(360deg);
            }

            #img2 {
                /*当动画针对width时时间为0.5秒,高度为2秒*/
                transition: width 0.5s, height 2s ease-in;
            }

            #img2:hover {
                width: 100px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <img src="img/7.jpg" id="img1" />
        <img src="img/7.jpg" id="img2" width="300" height="200" />
    </body>

</html>

效果:

亚洲必赢官网 65

过于动画基本可以本着元素的种属性为尺寸、透明度、颜色等。

  取值:

  取值:

8.2、帧动画

也叫做补间动画,过度动画中的效果是按照原有状态与对象状态生成的,若是要求控制中间经过则足以采取帧动画。

帧动画要求先定义再选取,使用@keyframes定义,animation调用定义好的卡通片。

@keyframes语法:

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>:[ [ from | to | <percentage> ]{
sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>: identifier定义一个动画名称

<keyframes-blocks>: 定义动画在种种阶段的体裁,即帧动画。

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

animation语法:
animation:<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time>
|| <single-animation-timing-function> || <time> ||
<single-animation-iteration-count> ||
<single-animation-direction> || <single-animation-fill-mode>
|| <single-animation-play-state>

animation-name : 检索或设置对象所拔取的动画片名称
animation-duration: 检索或安装对象动画的持续时间
animation-timing-function: 检索或安装对象动画的衔接类型
animation-delay: 检索或安装对象动画延迟的小运
animation-iteration-count ‘>: 检索或设置对象动画的大循环次数
animation-direction: 检索或安装对象动画在循环中是或不是反向运动
animation-fill-mode: 检索或设置对象动画时间之外的图景
animation-play-state:
检索或安装对象动画的情事。w3c正考虑是或不是将该属性移除,因为动画的事态可以经过其余的形式贯彻,比如重设样式

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            /*定义动画 名称为animate1*/
            @keyframes animate1 {
                /*第一帧样式*/
                from {
                    margin-left: 100%;
                    background: orangered;
                }
                /*动画执行到30%时样式*/
                30% {
                    background: lightblue;
                    width: 200px;
                    height: 200px;
                    border-radius: 100px;
                }
                /*动画执行到60%时样式*/
                60% {
                    background: lightgreen;
                    width: 300px;
                    height: 300px;
                    border-radius: 150px;
                }
                /*结束时样式*/
                to {
                    margin-left: 0;
                }
            }
            #div1 {
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: lightcoral;
                /*调用定义的动画,infinite无限制执行,linear动画函数线性动画*/
                animation: animate1 2s infinite linear;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>

效果:

 亚洲必赢官网 66

infinite表示动画平素执行,假使只想进行两次,可以去除该重大字。即便多数卡通使用CSS3可以成功,然而动画至极耗资源,更加是在移动端,不提出多用。尤其复杂的卡通片可以采用Canvas。

演习与测试:

亚洲必赢官网 67亚洲必赢官网 68

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>练习</title>
        <style type="text/css">
            #div1 {
                position: relative;
                font-size: 50px;
                text-shadow: 5px 5px 15px black;
                transition: all 1s;
            }
            @keyframes aaa{
                from{
                background: linear-gradient(to top left,red,green,blue);

                }
                33%{
                background: linear-gradient(to top left,blue,red,green);

                }
                66%{
                background: linear-gradient(to top left,green,blue,red);

                }
                to{
                background: linear-gradient(to top left,red,green,blue);

                }
            }
            #div1:before {
                position: absolute;
                content: " ";
                width: 50px;
                height: 50px;
                background: red;
                display: inline-block;
                transform: rotate(-30deg) translate(100%, 100%);
                left:280px;
                z-index: 100;
                opacity: .5;
                filter:alpha(opacity=50);
            }

            #div1:after {
                content: "Hello World";
                font-size: 50px;
                text-shadow: 5px 5px 15px black;
            }
            #div1:hover{
                transform: rotate(180deg);
            }
            #img1 {
                width: 400px;
                height: 300px;
                box-shadow: 5px 5px 10px lightblue;
                border-radius: 200px/150px;
            }

            #div2 {
                width: 300px;
                height: 200px;
                float: left;
                border: 2px solid lightcoral;
                background: url(img/3.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            #div3 {
                width: 300px;
                height: 200px;
                float: left;
                border: 2px solid lightseagreen;
                background: linear-gradient(to top left,red,green,blue);
                animation: aaa 2s infinite linear;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            Hello World!
            <img src="img/3.jpg" id="img1" width="300" height="300" />
        </div>
        <div id="div2">
        </div>
        <div id="div3">
        </div>
    </body>
</html>

View Code

  (1)英文单词的颜色,如“blue”、“red”

  (1)英文单词的颜料,如“blue”、“red”

九、示例下载

  (2)十六进制值,如“#ffffff”、“#ff0000”

  (2)十六进制值,如“#ffffff”、“#ff0000”

十、视频

  (3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

  (3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

十一、作业

11.1、请使用CSS3兑现如下效果,注意左下与右下角有翘起,文字有发光

亚洲必赢官网 69

11.2、请落成一个弹出框与遮罩效果,需要包容IE8

亚洲必赢官网 70

11.3、请使用CSS3形成如下动画效果

 亚洲必赢官网 71

亚洲必赢官网 72

 

<style>            
    #border2
      {
         width: 200px;
         height: 100px;
         border: solid;            
         border-color: #FF0000;                
    }
</style>

<body>
        <div id="border2"></div>        
</body>    
<style>            
    #border2
      {
         width: 200px;
         height: 100px;
         border: solid;            
         border-color: #FF0000;                
    }
</style>

<body>
        <div id="border2"></div>        
</body>    

 

 

 

 

4、border-style:设置对象的边框样式

4、border-style:设置对象的边框样式

     
 取值:

     
 取值:

  none:无轮廓。border-color与border-width将被忽视

  none:无轮廓。border-color与border-width将被忽略

     
 hidden:隐藏边框。IE7及以下尚不协助

     
 hidden:隐藏边框。IE7及以下尚不协理

     
 dotted:点状概略。IE6下显得为dashed效果

     
 dotted:点状概况。IE6下显得为dashed效果

     
 dashed:虚线概况。

     
 dashed:虚线梗概。

     
 solid:  实线概略。

     
 solid:  实线概略。

     
 double:双线概况。两条单线与其距离的和至极指定的border-width值

     
 double:双线轮廓。两条单线与其距离的和相当指定的border-width值

  可以对四边分别设置其边框样式:

  可以对四边分别安装其边框样式:

#border3
  {
   width: 200px;
   height: 100px;
   border: solid;
   border-top-style:dotted ;
   border-left-style:dashed ;    
   border-right-style: double;
   border-bottom-style: solid;    
  }

<div id="border3"></div>
#border3
  {
   width: 200px;
   height: 100px;
   border: solid;
   border-top-style:dotted ;
   border-left-style:dashed ;    
   border-right-style: double;
   border-bottom-style: solid;    
  }

<div id="border3"></div>

 

 

 

 

5、border-radius:设置对象使用圆角边框

5、border-radius:设置对象使用圆角边框

  • 水平半径:如果提供一切七个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的依次功能于七个角。
  • 假若只提供一个,将用以所有的于几个角。
  • 比方提供多少个,第三个用于上左(top-left)、下右(bottom-right),第四个用于上右(top-right)、下左(bottom-left)。
  • 只要提供五个,第二个用于上左(top-left),第三个用于上右(top-right)、下左(bottom-left),第七个用于下右(bottom-right)。
     
  • 水平半径:倘诺提供所有多少个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的一一效率于多个角。
  • 万一只提供一个,将用以所有的于四个角。
  • 若果提供四个,首个用于上左(top-left)、下右(bottom-right),第三个用于上右(top-right)、下左(bottom-left)。
  • 倘使提供八个,首个用于上左(top-left),第一个用于上右(top-right)、下左(bottom-left),第七个用于下右(bottom-right)。
     

   取值

   取值

      length:用长度值设置对象的圆角半径长度。不相同意负值

      length:用长度值设置对象的圆角半径长度。不允许负值

 
 percentage:用百分比设置对象的圆角半径长度。不允许负值 

 
 percentage:用百分比设置对象的圆角半径长度。不允许负值 

  

  

CSS代码
#yj{
                background-color:indianred ;
                width: 100px;
                height: 100px;
                border-radius: 10px 10px 20px 20px;

            }
HTML代码:
<div id="yj"> </div>
CSS代码
#yj{
                background-color:indianred ;
                width: 100px;
                height: 100px;
                border-radius: 10px 10px 20px 20px;

            }
HTML代码:
<div id="yj"> </div>

 

 

 二、段落样式

 二、段落样式

1、行高:

1、行高:

  控制段落内每行高度

  控制段落内每行中度

  line-height:nornmal|length

  line-height:nornmal|length

  CSS代码:

  CSS代码:

#duan1
 {
      border: 1px solid black;
      width: 500px;
      height:30px ;
      line-height: 30px;
  }
#duan1
 {
      border: 1px solid black;
      width: 500px;
      height:30px ;
      line-height: 30px;
  }

  HTML代码:

  HTML代码:

<body>        
        <p id="duan1">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
</body>
<body>        
        <p id="duan1">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
</body>

CSS3是CSS2的升级换代版本,3只是本子号,它在CSS2.1的基础上平添了好多强硬的新成效。

CSS3是CSS2的擢升版本,3只是本子号,它在CSS2.1的底蕴上加码了重重强有力的新功能。

 

 

 2、段落缩进:

 2、段落缩进:

  控制段落的首行缩进

  支配段落的首行缩进

  text-indent:length

  text-indent:length

  CSS代码:

  CSS代码:

      #duan2
        {
            width: 200px;
            text-indent: 2em;/*1em为16px。这里缩进2个字符*/
        }
      #duan2
        {
            width: 200px;
            text-indent: 2em;/*1em为16px。这里缩进2个字符*/
        }

 HTML代码:

 HTML代码:

 <p id="duan2">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
 <p id="duan2">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

 

 

亚洲必赢官网 73

亚洲必赢官网 74

3、段落对齐:

3、段落对齐:

  控制段落对齐形式,不不过文本,对象中的其它inline或inline-block元素也可以被text-
align举办对齐形式的安装。

  控制段落对齐情势,不不过文件,对象中的别的inline或inline-block元素也可以被text-
align举行对齐格局的装置。

  取值:

  取值:

     text-align:left      左对齐

     text-align:left      左对齐

       right      右对齐

       right      右对齐

       center   居中对齐

       center   居中对齐

       justify   两端对齐

       justify   两端对齐

   CSS代码:

   CSS代码:

              #duan3
        {
            background-color: aquamarine;
            width: 150px;
            text-align: right;
        }
              #duan3
        {
            background-color: aquamarine;
            width: 150px;
            text-align: right;
        }

   HTML代码: 

   HTML代码: 

<p id="duan3">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
<p id="duan3">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

   效果:

   效果:

  亚洲必赢官网 75

  亚洲必赢官网 76

4、文字间距:

4、文字间距:

  控制段落的文字间的相距

  控制段落的文字间的离开

  letter-spacing : normal | length 

  letter-spacing : normal | length 

  CSS代码:

  CSS代码:

             #duan4
        {        
            width: 150px;
            letter-spacing: 5px;
        }
             #duan4
        {        
            width: 150px;
            letter-spacing: 5px;
        }

  HTML代码:

  HTML代码:

        <p id="duan4">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
        <p id="duan4">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

  效果:

  亚洲必赢官网 77

  亚洲必赢官网 78

5、文字溢出:

5、文字溢出:

  控制文字内容溢出一部分的体裁

  控制文字内容溢出有些的体制

  text-overflow:clip    将溢出一些裁切掉   

  text-overflow:clip    将溢出有些裁切掉   

           ellipsis  将溢出部分替换为(…)

           ellipsis  将溢出一些替换为(…)

  注: 可是text-overflow只是用来注脚文字溢出时用怎么着措施显示,要落到实处溢出时暴发省略号的作用,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐匿(overflow:hidden),唯有那样才能兑现溢出文件突显省略号的作用。

  注: 可是text-overflow只是用来表明文字溢出时用什么样点子体现,要促成溢出时暴发省略号的意义,还须定义强制文本在一行内展现(white-space:nowrap)及溢出内容为隐蔽(overflow:hidden),唯有那样才能完成溢出文件展现省略号的效用。

  CSS代码:

  CSS代码:

        #duan5
        {
            width: 50px;
            height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }            
        #duan5
        {
            width: 50px;
            height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }            

  HTML代码:

  HTML代码:

  <p id="duan5">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
  <p id="duan5">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

  效果:

  亚洲必赢官网 79

  亚洲必赢官网 80

6、段落换行:  

6、段落换行:  

  控制内容超越容器的分界时是否断行。

  控制内容领先容器的境界时是不是断行。

  word-wrap:    normal         允许内容顶开或溢出指定的器皿边界。

  word-wrap:    normal         允许内容顶开或溢出指定的器皿边界。

            break-word  
  内容将在分界内换行。假诺须要,单词内部允许断行。

            break-word  
  内容将在边际内换行。如若要求,单词内部允许断行。

  CSS代码:

  CSS代码:

        .test p{width:100px;border:1px solid #000;}
        .normal p{word-wrap:normal;}
        .break-word p{word-wrap:break-word;}
        .test p{width:100px;border:1px solid #000;}
        .normal p{word-wrap:normal;}
        .break-word p{word-wrap:break-word;}

  HTML代码:

  HTML代码:

<ul class="test">
    <li class="normal">
        <strong>normal:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
    </li>
    <li class="break-word">
        <strong>break-word:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
        </li>
</ul>
<ul class="test">
    <li class="normal">
        <strong>normal:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
    </li>
    <li class="break-word">
        <strong>break-word:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
        </li>
</ul>

亚洲必赢官网 81

亚洲必赢官网 82

 

 

三、背景样式

三、背景样式

  1、背景颜色   

  1、背景颜色   

    background-color : transparent | color

    background-color : transparent | color

  例子:

  例子:

  body { background-color:#CCCCCC;}

  body { background-color:#CCCCCC;}

   h1 { background-color:#EDEDED;}

   h1 { background-color:#EDEDED;}

  2、背景图片 

  2、背景图片 

  background-image : none | url ( url )  url:图片保存的地方

  background-image : none | url ( url )  url:图片保存的地方

  CSS代码:

  CSS代码:

           #bgimg
        {
            width: 200px;
            height: 200px;
            background-image: url(img/fenfjing.jpg);
        }
           #bgimg
        {
            width: 200px;
            height: 200px;
            background-image: url(img/fenfjing.jpg);
        }

  HTML代码:

  HTML代码:

<div id="bgimg">这里加了背景图片!</div>
<div id="bgimg">这里加了背景图片!</div>

  亚洲必赢官网 83

  亚洲必赢官网 84

 

 

  3、背景平铺方式 

  3、背景平铺情势 

  background-repeat : repeat | no-repeat | repeat-x | repeat-y

  background-repeat : repeat | no-repeat | repeat-x | repeat-y

  取值:

  取值:

     repeat-x:
背景图像在横向上平铺

     repeat-x:
背景图像在横向上平铺

     repeat-y:
背景图像在纵向上平铺

     repeat-y:
背景图像在纵向上平铺

     repeat:
背景图像在横向和纵向平铺

     repeat:
背景图像在横向和纵向平铺

     no-repeat:
背景图像不平铺

     no-repeat:
背景图像不平铺

     round:
背景图像自动缩放直到适应且填充满整个容器。(CSS3)

     round:
背景图像自动缩放直到适应且填充满整个容器。(CSS3)

     space:
背景图像以同等的间距平铺且填充满整个容器或某个方向。(CSS3)

     space:
背景图像以同一的间隔平铺且填充满整个容器或某个方向。(CSS3)

CSS代码:

CSS代码:

             #bgimg
        {
            width: 400px;
            height:200px;
            background-image: url(img/fenfjing.jpg);
            background-repeat: repeat;
        }
             #bgimg
        {
            width: 400px;
            height:200px;
            background-image: url(img/fenfjing.jpg);
            background-repeat: repeat;
        }

HTML代码:

HTML代码:

<div id="bgimg">这里背景图片平铺了!</div>
<div id="bgimg">这里背景图片平铺了!</div>

亚洲必赢官网 85

亚洲必赢官网 86

4、背景定位

4、背景定位

background-position : 左对齐方式 上对齐格局  注:设置或探寻对象的背景图像地点,必须先指定background-image属性。

background-position : 左对齐格局 上对齐格局  注:设置或探寻对象的背景图像地方,必须先指定background-image属性。

取值:

取值:

percentage:用百分比指定背景图像填充的职位。可以为负值。
length:用长度值指定背景图像填充的岗位。可以为负值。
left:背景图像在横向上填充从左边开端。
center:背景图像在横向上填充从中路开端。
right:背景图像在横向上填充从右边起初。
top:背景图像在纵向上填充从顶部从头。
center:背景图像在纵向上填充从中间开头。
bottom:背景图像在纵向上填充从底部起头。
CSS代码:

percentage:用百分比指定背景图像填充的职责。可以为负值。
length:用长度值指定背景图像填充的地点。可以为负值。
left:背景图像在横向上填充从左侧起先。
center:背景图像在横向上填充从中间开始。
right:背景图像在横向上填充从右侧伊始。
top:背景图像在纵向上填充从顶部初步。
center:背景图像在纵向上填充从中路起始。
bottom:背景图像在纵向上填充从尾部伊始。
CSS代码:

             #bgimg
        {
            width: 200px;
            height:300px;
            border: 1px solid black;            
            background-position: left top;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;            
        }        
             #bgimg
        {
            width: 200px;
            height:300px;
            border: 1px solid black;            
            background-position: left top;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;            
        }        

HTML代码:

为背景图片设置了位置

HTML代码:

为背景图片设置了位置

亚洲必赢官网 87

亚洲必赢官网 88

5、背景原点

5、背景原点

background-origin : border-box | padding-box | content-box;  注:必须有限帮助背景是background-repeat为no-repeat
此属性才会卓有作用。

background-origin : border-box | padding-box | content-box;  注:必须有限支撑背景是background-repeat为no-repeat
此属性才会生效。

取值:

取值:

padding-box:从padding区域(含padding)先导显得背景图像。
border-box:从border区域(含border)初步展现背景图像。
content-box:从content区域开首显示背景图像。
CSS代码:

padding-box:从padding区域(含padding)开端显得背景图像。
border-box:从border区域(含border)先河显示背景图像。
content-box:从content区域初叶突显背景图像。
CSS代码:

            #bgorigin
        {
            width: 150px;
            height: 100px;
            border: 15px solid cornflowerblue;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-origin: border-box;
        }            
            #bgorigin
        {
            width: 150px;
            height: 100px;
            border: 15px solid cornflowerblue;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-origin: border-box;
        }            

HTML代码:

HTML代码:

亚洲必赢官网 89

亚洲必赢官网 90

6、背景的来得区域

6、背景的体现区域

设定背景图像向外裁剪的区域。

设定背景图像向外裁剪的区域。

background-clip : border-box | padding-box | content-box | text

background-clip : border-box | padding-box | content-box | text

取值:

取值:

padding-box:从padding区域(不含padding)早先向外裁剪背景。

padding-box:从padding区域(不含padding)开首向外裁剪背景。

border-box:从border区域(不含border)伊始向外裁剪背景。

border-box:从border区域(不含border)伊始向外裁剪背景。

content-box:从content区域早先向外裁剪背景。

content-box:从content区域先导向外裁剪背景。

text:之前景内容的形态(比如文字)作为裁剪区域向外裁剪,如此即可完毕接纳背景作为填充色之类的遮罩效果。

text:往日景内容的形态(比如文字)作为裁剪区域向外裁剪,如此即可完毕利用背景作为填充色之类的遮罩效果。

CSS代码:

CSS代码:

           #pclip{
            width:200px;
            height:200px;
            margin:0;
            padding:20px;
            border:10px dashed #666;
            background:#aaa url(img/fenfjing.jpg) no-repeat;

        }                
           #pclip{
            width:200px;
            height:200px;
            margin:0;
            padding:20px;
            border:10px dashed #666;
            background:#aaa url(img/fenfjing.jpg) no-repeat;

        }                

HTML代码:

HTML代码:

<ul class="test1">
    <li class="border-box">            
    <p id="pclip">从border区域(不含border)开始向外裁剪背景</p>
    </li>
</ul>    
<ul class="test1">
    <li class="border-box">            
    <p id="pclip">从border区域(不含border)开始向外裁剪背景</p>
    </li>
</ul>    

亚洲必赢官网 91

亚洲必赢官网 92

7、背景尺寸

7、背景尺寸

设置背景图片的轻重,以长度值或比重突显,还是能通过cover和contain来对图纸展开伸缩。

安装背景图片的分寸,以长度值或比重显示,还足以经过cover和contain来对图片举行伸缩。

length:用长度值指定背景图像大小。不允许负值。

length:用长度值指定背景图像大小。不允许负值。

<percentage>:用百分比指定背景图像大小。不允许负值。

<percentage>:用百分比指定背景图像大小。不允许负值。

auto:背景图像的真正大小。

auto:背景图像的真实性大小。

cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能不止容器。

cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

contain:将背景图像等比缩放到步长或可观与容器的肥瘦或可观相等,背景图像始终被含有在容器内。

contain:将背景图像等比缩放到步长或可观与容器的增加率或可观相等,背景图像始终被含有在容器内。

CSS代码:

CSS代码:

            #bgimg
        {
            width: 200px;
            height:100px;
            border: 1px solid black;                        
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-size: 100px 50px;            
        }              
            #bgimg
        {
            width: 200px;
            height:100px;
            border: 1px solid black;                        
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-size: 100px 50px;            
        }              

HTML代码:

HTML代码:

<div id="bgimg"></div>
<div id="bgimg"></div>

亚洲必赢官网 93

亚洲必赢官网 94

8、背景样式缩写

8、背景样式缩写

背景样式四个特性的缩写

背景样式多个特性的缩写

background: 背景观 背景图片 背景平铺格局 背景定位

background: 背景象 背景图片 背景平铺方式 背景定位

例: body {

例: body {

     background-color:# EDEDED;

     background-color:# EDEDED;

            background-image:url(images/bg.png);

            background-image:url(images/bg.png);

            background-repeat:no-repeat;

            background-repeat:no-repeat;

            background-position:50% 30px;

            background-position:50% 30px;

      }

      }

         缩写后:

         缩写后:

      body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

      body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

9、多重背景

9、多重背景

  • 一个要素得以安装多重背景图像。
  • 每组属性间使用逗号分隔。
  • 若是设置的泛滥成灾背景图之间存在着夹杂(即存在器重叠关系),前面的背景图会覆盖在背后的背景图之上。
  • 一个要素得以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的一连串背景图之间存在着夹杂(即存在器重叠关系),前边的背景图会覆盖在后头的背景图之上。

  注:用逗号隔开每组 background
的缩写值; 如若有 size 值,必要紧跟 position 并且用 “/” 隔开;
如果有多少个背景图片,而其余属性唯有一个(例如 background-repeat
唯有一个),评释 所有背景图片应用该属性值。
background-color 只好设置一个。

  注:用逗号隔开每组 background
的缩写值; 如若有 size 值,需求紧跟 position 并且用 “/” 隔开;
若是有多少个背景图片,而其余品质唯有一个(例如 background-repeat
唯有一个),申明 所有背景图片应用该属性值。
background-color 只能设置一个。

     例:

     例:

CSS代码:

CSS代码:

        #mutilbg
        {
            width: 200px;
            height: 200px;
            background:url(img/mine.png) no-repeat 100px     100px,url(img/fenfjing.jpg) no-repeat 0px 0px;
        }
        #mutilbg
        {
            width: 200px;
            height: 200px;
            background:url(img/mine.png) no-repeat 100px     100px,url(img/fenfjing.jpg) no-repeat 0px 0px;
        }

HTML代码:

HTML代码:

<div id="mutilbg"></div>
<div id="mutilbg"></div>

亚洲必赢官网 95

亚洲必赢官网 96

 

 

 

 

 

 

  

  

 

 

 

 

 

 

网站地图xml地图