2.css常用样式的的补充,第2个长度值用来设置对

作者: 前端  发布:2019-11-22

探索 CSS3 中的 box-shadow 属性

2016/09/19 · CSS · box-shadow

本文由 伯乐在线 - 老大的技术员 翻译,刘唱 校稿。未经许可,制止转发!
斯洛伐克共和国(The Slovak Republic卡塔 尔(英语:State of Qatar)语出处:Ire Aderinokun。应接参加翻译组。

打通你早先从没见过的部分行使。
PS:作品最终的 codepen 有8个不利的案例。

A . 学习内容

1.下拉菜单的实现(float,position,display的应用卡塔尔国
2.css常用样式的的互补
3.公家样式的提取
4.css 2D转换

切切实实代码:
1、水平翻转
-moz-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
-o-transform:scale(-1,1);
transform:scale(-1,1);
filter:FlipH;

CSS3与页面布局学习笔记(六卡塔尔国——CSS3新特征(阴影、动漫、渐变、变形、伪成分等卡塔尔国,学习笔记css3

“box-shadow”属性

box-shadow品质是二个CSS3属性,允许咱们在差十分少任何因素上来创立阴影效果,形似于在规划软件中的”drop shadow”。那个影子效果允许我们在原本平面包车型的士、二维的页面上边成立出深度(第四个维度卡塔尔国的错觉。

B . 学习到的核心总括

2、垂直翻转
-moz-transform:scale(1,-1);
-webkit-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
filter:FlipV;

一、阴影

语法

box-shadow质量接纳三个由5个部分构成的值

JavaScript

box-shadow: offset-x offset-y blur spread color position;

1
2
box-shadow: offset-x offset-y blur spread color position;
 

不像 border等属性值可以拆分成子属性,box-shadow质量是独自的。那代表记录下属性值的黄金时代豆蔻梢头特别重大,特别是长度值。

1.下拉菜单的达成

html内容如下:

<div class="header">
    <ul class="row">
        <li class="dropDown">
            <a  href="#">收藏夹</a>
            <div class="dropContent">
                <a href="#">收藏宝贝</a>
                <a href="#">收藏店铺</a>
            </div>
        </li>
        <li><a href="#">卖家中心</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>
</div>~~~
css样式如下:

*{margin: 0;padding:0}
.header{
width: 1000px;
background: pink;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.row:before{content:"";display: table;}
.row:after{content: "";display: table;clear: both;}

ul{list-style: none;}
li{
float: left;
width: 140px;
}
li a{
display: block;
text-decoration: none;
color: #ffffff;
font-size: 20px;
line-height: 60px;
}
.dropDown{
position: relative;
}
.dropContent{
position: absolute;
background-color: #ffacb1;
width: 140px;
display: none;
}
.dropDown:hover .dropContent{
display: block;
}
a:hover{
background-color: #ff6b81;
}~~~

3、顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

1.1、文字阴影

text-shadow
<length>①: 第四个长度值用来设置对象的影子水平偏移值。可认为负值
<length>②: 第4个长度值用来安装对象的黑影垂直偏移值。可认为负值
<length>③: 倘若提供了第1个长度值则用来设置对象的阴影模糊值。不容许负值
<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>

运作效果:

 9159.com 1

亲自去做代码:

<!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>

 

运维结果:

9159.com 2

offset-x

率先个长度值钦定了阴影的水准偏移量。即在x轴上投影的岗位。正值使阴影出今后要素的边,而负值使阴影出今后要素的边。

JavaScript

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
 

 

2.border-radius属性

可单独退换生机勃勃边:
border-top-left-radius: value;
border-top-right-radius:value;
border-bottom-left-radius:value;
border-bottom-right-radius:value

transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;

1.2、盒子阴影

box-shadow
<length>①: 第二个长度值用来安装对象的阴影水平偏移值。可以为负值
<length>②: 第1个长度值用来安装对象的黑影垂直偏移值。可认为负值
<length>③: 假诺提供了第三个长度值则用来设置对象的阴影模糊值。不一致敬负值
<length>④: 假设提供了第二个长度值则用来安装对象的影子外延值。可感觉负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的黑影类型为外阴影

9159.com 3

亲自过问代码:

<!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>

运维效果:

9159.com 4

练习:

9159.com 5

9159.com 6

3.box-shadow足以给成分增加阴影

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
必须 水平阴影的地点。允许负值。
v-shadow
必备。垂直阴影的职位。允许负值。
blur
可选。模糊间距。
spread
可选。阴影的尺码。
color
可选。阴影的水彩。请参阅 CSS 颜色值。
inset
可选。将表面阴影 (outset) 改为内部阴影

倾斜
transform:skew(20deg);

二、背景

offset-y

第3个长度值钦命了阴影的垂直偏移量。即在y轴上阴影的岗位。正值使阴影出现在要素的边,而负值使阴影出未来要素的边。

JavaScript

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
 

9159.com 7

4.文字效果

//设置文字的黑影
text-shadow: h-shadow v-shadow blur color;
//用的非常的少,但面试的时候境遇过

text-overflow 文本溢出属性钦定如何体现溢出内容
p{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
//white-space内定文字是还是不是换行
}

{ -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg); -o-transform:rotate(720deg); transform:rotate(720deg); transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -o-transition:all 0.4s linear;}

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>

运维结果:

9159.com 8

9159.com 9

blur

其多个长度值代表阴影的混淆半径,比方表明,仿佛您在统筹软件中动用高斯模糊滤镜。0值意味着阴影是一心实心和浓郁的,未有其余模糊。模糊数值越大,尖锐度越小,阴影越朦胧和歪曲。负值是不被允许的,并会被拍卖成0。

JavaScript

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

1
2
3
4
5
6
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
 

9159.com 10

5.translate位移

该因素移动的岗位,决定于宽度(X轴)和冲天(Y)
translate(x,y) x代表移动的宽度,y轴表示移动的惊人

div
{
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}~~~
######6.旋转rotate

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 /
-webkit-transform: rotate(30deg); /
Safari and Chrome */
}~~~

阴影动漫
<style>
.box { position: relative; left:10px; top:20px; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out; }
.box::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.6); transition: all 0.3s ease-in-out;}
.box:hover::after{ opacity:1;}
.box:hover{ left:20px; top:40px; transform: scale(1.2, 1.2); transition: all 0.3s ease-in-out;}
</style>
<div class="box"></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效果:

9159.com 11

 content-box效果:

9159.com 12

padding-box效果:(默认)

9159.com 13

spread

第多少个,同不时间也是最终一个长度值代表着阴影的尺寸。这一个值能够被想象成从要素到影子的离开。正值会在要素的逐条方向按内定的数值延伸影子。负值会使阴影收缩得比成分本身尺寸还小。私下认可值0会让阴影伸展得和要素的分寸相仿。

JavaScript

.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) } .right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }

1
2
3
4
5
6
.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }
 

9159.com 14

7.缩放scale

//scale(2,3卡塔尔国转换宽度为原来的轻重的2倍,和其固有大小3倍的冲天。

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */~~~

######8. 倾斜skew(x,y)
skew(x,y) 方法,x表示水平方向,y表示垂直方向

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 /
-webkit-transform: skew(30deg,20deg); /
Safari and Chrome */
}~~~

IE滤镜天性:

三、伪元素

伪元素不是真的要素是透过CSS虚构出的七个成分,CSS3的语法为了差距伪成分与伪类,使用“::”表示,可是早期为了合营“:”仍旧可以行使。

color

颜色值,正如您期待的,是影子的水彩。它能够是别的颜色单位。(参照他事他说加以侦查 Working with Colour in CSS)

JavaScript

.left { box-shadow: 0px 0px 20px 10px #67b3dd } .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
 
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
 

9159.com 15

9.transition过渡

CSS3 过渡(transition) 配合hover使用

//改变宽度时长为2秒
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{ 
    width:100px;
}~~~
多项改变

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(30deg)
}~~~
全体制修改变 可用all 即 ————transition: all 2s;

Alpha 透明效果
Blend Trans 渐隐渐现需结合javascript
Blur 动态模糊
Chrome 透明色效果
DropShadow 投影效果
FlipH 水平翻转
qlow 光晕效果
Gray 滤色效果
Invert 底片效果
FlipV 垂直效果
Light 电灯的光效果需结合javascript
Mask 遮罩效果
RevealTrans 图像切换效果发生百叶窗、溶解等动态效果需结合javascript
Shadow 阴影效果
Wave 波浪效果
X-ray X光片效果

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>

效果:

9159.com 16

在上头的以身作则中伪成分能够算作叁个常规的成分写全体样式,attr能够收取成分的品质,img能够钦定图片。

position

box-shadow属性的末尾多少个值是二个可选的重中之重字,它象征着阴影的岗位。私下认可情形下,这么些值并而从不交到,那表示阴影是叁个外表阴影。我们能通过首要字inset使阴影形成内部阴影

JavaScript

.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset } .right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
 
.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }
 

9159.com 17

C . 熟知知识点

 

3.2、after

after也是叁个与before相似的伪成分,分歧的是她的职位是在里边的尾巴部分,示举例下:

9159.com 18<!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="" id="link1">博客园</a> </p> <p> <a href="" id="link2">张果 - 博客园</a> </p> </body> </html> View Code

运维效果:

9159.com 19

 注意:

a)、本质上并不扶助伪成分的双冒号(::)写法,而是忽略掉了中间的三个冒号,仍以单冒号来剖析,所以同样变相扶植了E::after。
b)、不辅助设置属性position, float, list-style-*和部分display值,Firefox3.5方始收回这么些限定。
c)、IE10在使用伪成分动漫有三个主题材料:
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需求选拔四个空的:hover来激活

多重阴影

box-shadow属品质在单个成分上采纳几个黑影。逐个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

JavaScript

.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */ 20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */ }

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}
 

9159.com 20

1.position的使用

rotate

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;
                /*清除外部浮动*/
            }

圆形阴影

box-shadow质量的界线半径是通过该因素的 border-radius质量来调整的。

JavaScript

.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5); border-radius: 50%; }

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-radius: 50%;
}
 

9159.com 21

2.float的施用与消弭

安装成分顺时针旋转的角度,用法是:

四、圆角与边框

圆角或者是我们最急切要求的CSS3样式了,在CSS2.1中想尽各样法子都不算能够,达成方式如下:

把它们位于一齐

把持有的有的放在一块儿,我们能因而接受box-shadow本性创制出意气风发部剥奇怪的功能。

3.不易的锁定采纳器,不相会世样式混乱

transform: rotate(x);

4.1、border-radius 圆角

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

<length>: 用长度值设置对象的圆角半径长度。分歧意负值
<percentage>: 用百分比设置对象的圆角半径长度。差别意负值

此处有两片段,第一个角度是水平角度,第三个角度是垂直角度。

a)、提供2个参数,2个参数以“/”分隔,每一种参数允许设置1~4个参数值,第3个参数表示水平半径,第三个参数表示垂直半径,如第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>

效果:

9159.com 22

9159.com 23

9159.com 24

9159.com 25

9159.com 26

大器晚成种非布局模块边界的代替品

咱俩得以选取box-shadow品质来创建风姿洒脱种成分,这种成分是境界环绕的,不过它不打搅盒子模型恐怕页面上边的其余布局。更有甚者,用它来创设出多少个黑影,大家能够在要素差别的边际具备差别体裁的境界。

JavaScript

.simple { box-shadow: 0px 0px 0px 40px indianred; } .multiple { box-shadow: 20px 20px 0px 20px lightcoral, -20px -20px 0px 20px mediumvioletred, 0px 0px 0px 40px rgb(200,200,200); }

1
2
3
4
5
6
7
8
9
10
.simple {
    box-shadow: 0px 0px 0px 40px indianred;
}
 
.multiple {
    box-shadow: 20px 20px 0px 20px lightcoral,
                -20px -20px 0px 20px mediumvioletred,
                0px 0px 0px 40px rgb(200,200,200);
}
 

9159.com 27

D . 面生知识点

参数x必需是以deg结尾的角度数或0,可为负数表示反向。

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 '>: 设置或探索对象的边框图像的平铺格局。

9159.com 28

9159.com 29

示例:

<!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>

效果:

9159.com 30

9159.com 31

弹出职能

box-shadow(和transform卡塔 尔(阿拉伯语:قطر‎属性上拓宽变形,我们能创设出贰个因素接近只怕远隔使用者的假象。

JavaScript

.popup { transform: scale(1); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; } .popup:hover { transform: scale(1.3); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; }

1
2
3
4
5
6
7
8
9
10
11
.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
 

9159.com 32

1.选拔少之甚少的文字溢出管理

scale

五、变形 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筋不闻不问卡塔 尔(英语:State of Qatar),需先有 <' transform-origin '> 属性的概念
scale(): 钦命对象的2D scale(2D缩放卡塔尔国。第一个参数对应X轴,第二个参数对应Y轴。借使第三个参数未提供,则暗许取第三个参数的值
scalex(): 钦赐对象X轴的(水平方向卡塔 尔(英语:State of Qatar)缩放
scaley(): 钦命对象Y轴的(垂直方向卡塔 尔(英语:State of Qatar)缩放
skew(): 钦定对象skew transformation(斜切扭曲卡塔 尔(英语:State of Qatar)。第二个参数对应X轴,第叁个参数对应Y轴。假若第三个参数未提供,则默许值为0
skewx(): 钦赐对象X轴的(水平方向卡塔 尔(英语:State of Qatar)扭曲
skewy(): 钦点对象Y轴的(垂直方向卡塔尔扭曲 3D Transform Functions:
matrix3d(): 以三个4x4矩阵的款式钦点多个3D转变
translate3d(): 内定对象的3D位移。第2个参数对应X轴,第4个参数对应Y轴,首个参数对应Z轴,参数不容许省略
translatez(): 钦命对象Z轴的活动
rotate3d(): 钦点对象的3D旋转角度,个中前3个参数分别表示旋转的方向x,y,z,第三个参数表示旋转的角度,参数不容许省略
rotatex(): 钦点对象在x轴上的团团转角度
rotatey(): 钦点对象在y轴上的团团转角度
rotatez(): 钦定对象在z轴上的团团转角度
scale3d(): 钦赐对象的3D缩放。第三个参数对应X轴,第二个参数对应Y轴,首个参数对应Z轴,参数不容许省略
scalez(): 钦赐对象的z轴缩放
perspective(): 钦命透视间距

变迁效果

小编们能在:after如此的伪成分上平添box-shadow的作用。大家能运用那一个来创制出成分尾巴部分的影子,授予成分浮起或然掉落下来的假象。

JavaScript

.floating { position: relative; transform: translateY(0); transition: transform 1s; } .floating:after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } /* Hover States */ .floating:hover { transform: translateY(-40px); transition: transform 1s; } .floating:hover:after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.floating {
    position: relative;
 
    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
 
    transform: translate(-50%, 0);
    transition: transform 1s;
}
 
/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}
 

9159.com 33

咱俩能因此box-shadow质量完结非常多别的的特效。例如,this popular pen 使用那特性情成立出8种近似纸张的机能。即使表面上看起来它是二个用以制造简单阴影的工具,实际上它可远比特别效用强盛的多。

打赏补助本人翻译越多好作品,多谢!

打赏译者

2.新学习的2D转换的处理

设置成分放大或降低的倍数,用法包括:

5.1、rotate()2D旋转

transform:rotate(<angle>)

angle是角度的意趣,单位能够是:

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

示例:

9159.com 34<!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

效果:

9159.com 35

打赏帮衬自身翻译越多好文章,多谢!

9159.com 36

2 赞 8 收藏 评论

transform: scale(a); 成分x和y方向均缩放a倍

5.2、设置原点 transform-origin 

transform-origin用于安装变形时的原点,从5.1方可看见转动时暗许的原点在核心,这里运用该属性订正原点地点。

transform-origin:[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
默认值:一半 一半,效果等同center center

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

示例:

9159.com 37<!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

效果:

9159.com 38

貌似景况下咱们会在9个关键点转动,也足以动用具体的数字钦点二个非同小可的职分。

关于我:高大的技士

9159.com 39

简要介绍尚未来得及写 :卡塔尔 个人主页 · 笔者的篇章 · 11

9159.com 40

transform: scale(a, b); 成分x方向缩放a倍,y方向缩放b倍

5.3、平移 translate() 

transform:translate(x,y) = translate(<translation-value>[,<translation-value>]?),内定对象的2D translation(2D运动卡塔尔。第二个参数对应X轴,第三个参数对应Y轴。如若第3个参数未提供,则暗许值为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>

效果:

9159.com 41

能够动用该措施达成垂直居中,需求运用一定。

transform: scaleX(a); 成分x方向缩放a倍,y方向不改变

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>

效果:

9159.com 42

transform: scaleY(b); 成分y方向缩放b倍,x方向不改变

5.5、斜切扭曲skew 

transform:skew(x,y): 钦定对象skew transformation(斜切扭曲卡塔尔。第贰个参数对应X轴 角度,第3个参数对应Y轴角度。假设首个参数未提供,则默许值为0 

示例:

x30度角时间效益果:

9159.com 43

y30度角时间效果与利益果:

9159.com 44

x30度角,y30度角时的效果与利益:

9159.com 45

练习1:

9159.com 46

只允许一个div,能够动用CSS3

练习2:

请落成如下效果,可以应用CSS3

9159.com 47

9159.com 48

9159.com 49

9159.com 50

9159.com 51<!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

translate

六、渐变

在前期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>

效果:

9159.com 52

假诺要思量包容IE浏览器,能够应用IE中有意的滤镜。

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

IE中常用的滤镜:

9159.com 53透明效果:filter:阿尔法(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:阿尔法(opacity=100, finishOpacity=0,style=2; 好多 Filter 中的特效均已跻身了 CSS3 草案,并在新版的非 IE 浏览器中获取了很好的帮助。 View Code

设置成分的移位,用法为:

七、透明

transform: translate(a, b); 成分x方向位移a,y方向位移b

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>

效果:

9159.com 54

transform: translateX(a); 元素x方向位移a,y方向不改变

7.2、transparent与图片透明

用来钦命全透明色彩
transparent是全透明浅紫(black)的速记法,即三个近乎rgba(0,0,0,0)那样的值。
在CSS第11中学,transparent被用来作为background-color的三个参数值,用于表示背景透明。
在CSS第22中学,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:色彩越来越丰盛,扶助透明,不扶助动画

9159.com 55

transform: translateY(b); 成分y方向位移b,x方向不改变

7.3、RGBA

讴歌RDXGBA是CSS3中新添用于安装颜色的主意,语法:

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

此色彩方式与QashqaiGB肖似,只是在EvoqueGB方式上增加产能了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>

效果:

9159.com 56

代码:

9159.com 57<!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

作业:

请实现如下效果,必要宽容IE8:

9159.com 58

skew

八、动画

前端能够使用javascript实现部分轻松易行的卡通,不过有一点都不小局限;jQuery解决了部分难题,对于一些小的卡通片jQuery表示不错,但复杂的交接效果也无可奈何;CSS3中引入了2种动漫效果表现不错,分别是连着动漫与帧动漫。

设置成分偏斜的角度,用法包涵:

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>

效果:

9159.com 59

过度动漫基本得以本着成分的种属性为尺寸、反射率、颜色等。

transform: skew(a, b); 成分x方向逆时针倾斜角度a,y方向顺时针偏斜角度b

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>

效果:

 9159.com 60

infinite表示动漫从来实施,假诺只想进行叁回,可以去除该重大字。即便非常多卡通使用CSS3得以成功,可是动漫特别耗财富,特别是在移动端,不提出多用。尤其复杂的卡通片能够接收Canvas。

练习与测量试验:

9159.com 61<!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

transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不改变

九、示例下载

参照:

9159.com 62

风度翩翩、阴影 1.1、文字阴影 text-shadow len...

transform: skewY(b); 成分y方向顺时针偏斜角度b,想方向不改变

以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

matrix

安装成分的变形矩阵,因为矩阵变形过于复杂,暂略。

origin

设置成分的悬挂点,用法包含:

transform-origin: a b; 成分的悬挂点为(a, b)

要素的悬挂点即为它旋转和偏斜时的主旨点。取值中的a、b能够是长度值、以%结尾的比例也许left、top、right、bottom多少个值。

 

连片效果
transition-property: width;
transition-duration: 2s;
圆角:border-radius:2px;
阴影:box-shadow:1px 1px 2px #FFF;

 

css渐变背景
background:-webkit-gradient(linear,left top,right bottom,color-stop(0,#972D20),color-stop(1,#A92400));
background:-moz-linear-gradient(left, #972D20, #A92400);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#972D20',endColorStr='#A92400',gradientType='1');

 

图表动漫
@keyframes aabb {
0% {
transform: rotate(0deg);
border:5px solid red;
}
50% {
transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
@-webkit-keyframes aabb {
0% {
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50% {
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading {
border: 5px solid black;
border-radius: 40px;
width: 28px;
height: 188px;
animation: aabb 2s infinite linear;
-webkit-animation: aabb 2s infinite linear;
margin: 100px;
}

animation:load 0.6s steps(12, end) infinite; -webkit-animation:load 0.6s steps(12, end) infinite;

本文由9159.com发布于前端,转载请注明出处:2.css常用样式的的补充,第2个长度值用来设置对

关键词:

上一篇:没有了
下一篇:没有了