CSS3_01_圆角_边框_渐变

CSS3 是最新的 CSS 标准。我们的 CSS3 教程向您讲解 CSS3 中的新特性。

手册说明:

　　CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。

css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效、多栏布局等等。

　　CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。

在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。

在文字效果方面，特意增加了投影。

　　CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，

因此原来的代码不需要做太多的改变，只会变得更加地轻松。

　　学习CSS3，自然是要搭配着html5以及javascript一起进阶，这样才能够更加全面地掌握到建站技术。

本书知识点

CSS3 边框

CSS3 圆角

CSS3 背景

CSS3 渐变

CSS3 阴影

CSS3 选择器

CSS3 文本效果

CSS3 字体

CSS3 动画

CSS3 用户界面

CSS 图片

CSS 按钮

CSS3 多媒体

CSS3生成工具

CSS3 Maker：

CSS3 Generator：

CSS3 Drop shadow generatr：

CSS3代码生成器：

CSS3圆角生成器：

CSS3调试工具

Modernizr,HTML5/CSS3 特性检测库：

CSS3 transform(变形)和transform-origin(变形原点)调试工具：

CSS3 Text Stroke(文本描边)和text-fill-color(文本填充色)调试工具：

CSS3 border-radius(圆角)效果在线调试工具：

CSS3 Text Shadow(文本阴影)效果在线调试工具：

CSS3 Box Shadow(阴影)效果在线调试工具：

Firefox的Linear Gradients (线性渐变)在线调试工具：

CSS3 边框

用CSS3，您可以创建圆角边框，添加阴影框，

并作为边界的形象而不使用设计程序（如Photoshop等作图软件），极大地帮助您节省了很多时间。

而在本节中，您将了解以下的边框属性有：

border-radius
box-shadow
border-image（需要注意的是：该属性不支持ie浏览器）,IE 9+ 只支持 border-radius 和 box-shadow 属性。

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera是对于 border-image 需要前缀 -o-。

CSS3 圆角 border-radius

在CSS2中添加圆角是需要一些技巧的，尤其对于新手来说更加难了，所有我们不得不在每个角落使用不同的图像。

但是如果您在CSS3中，就能够很容易创建圆角。

在CSS3中border-radius属性就是被用于创建圆角的:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}/*border-radius属性可以添加圆角边框*/div {border:2px solid Teal;padding: 10px 40px;background:#eee;width: 300px;/*圆角边框的核心代码*/border-radius: 25px;/*div居中*/margin:0 auto;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>border-radius属性可以添加圆角边框</div><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>        </footer> </body>
</html>

效果如下:

以下示例即：圆角边框，您可以尝试着做一个！

核心代码:

在div中添加圆角元素：

div {

border:2px solid;

border-radius:25px;

}

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}/*border-shadow属性可以添加盒子阴影*/div {border:2px solid Teal;padding: 10px 40px;background:#eee;width: 300px;height: 100px;/*div居中*/margin:0 auto;/*阴影核心代码x偏移,y偏移,模糊度*/box-shadow: 10px 10px 15px #888;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>border-shadow属性可以添加盒子阴影<br/>x偏移,y偏移,模糊度,阴影颜色</div><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer> </body>
</html>

效果如下:

核心代码:

在div中添加box-shadow属性

div {

/*x offset ,y offset ,blur ,shadow color*/

box-shadow: 10px 10px 5px #888888;

}

CSS3边界图片 border-image

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在div中使用图片创建边框

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}/*border-shadow属性可以添加盒子阴影*/div {/*???*/border:15px solid transparent;width: 250px;padding: 10px 20px;}#id_div_round {/*Safari 5 and older*/-webkit-border-image:url(border.png) 30 30 round;/*Opera*/-o-border-image:url(border.png) 30 30 round;/*通用的必须写在最后面前面两个数字参数是干嘛的???*/border-image:url(border.png) 30 30 round;}#id_div_stretch {/*Safari 5 and older*/-webkit-border-image:url(border.png) 30 30 stretch;/*Opera*/-o-border-image:url(border.png) 30 30 stretch;/*通用的必须写在最后面前面两个数字参数是干嘛的???*/border-image:url(border.png) 30 30 stretch;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>border-image属性可以将图片作为盒子边框<br/>IE不支持border-image属性</div><div id="id_div_round">这个div使用图片round作为边框</div><br/><div id="id_div_stretch">这个div使用图片stretch作为边框</div><p>图片素材border.png如下:<img src="border.png" /><img src="border_css.png" /></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer> </body>
</html>

效果如下:

核心代码:

在div中使用图片创建边框

div

{

-o-border-image:url(border.png) 30 30 round; /* Opera */

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

border-image:url(border.png) 30 30 round; /* 通用的必须放最后面 */

}

新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

关于border-image的补充知识:

border-image是CSS3的一个属性，由于第2个参数slice比较复杂

border-image: source slice width outset repeat;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	这个例子演示了如何创建一个border-image 属性的按钮。

border-image的用处

border-image的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景：

元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果
按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。

border-image属性分析

border-image-source

边框背景图片。格式为：url(“…”)。

border-image-slice

图片边框向内偏移的距离???Excuse Me???

格式：border-image-slice：top right bottom left。

分别指切割背景图片的四条线距离上右下左的距离。

如下图所示：

该距离接受数值，百分数。

默认数值的单位是px,

但是不能在数值后面再加个px，否则这句css将不被浏览器解析。
用法和margin，padding类似。

这里以数值举例，百分数同理。

border-image-slice: 10;   /*距离上下左右均为10px;*/
border-image-slice: 10 30;   /*距离上下10px,左右30px;*/
border-image-slice: 10 30 20;   /*距离上10px,下20px,左右30px;*/
border-image-slice: 10 30 20 40;   /*距离上10px,右30px,下20px,左40px;*/

四条线将背景图分割成了9个部分，

其中除了区域5之外,1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，

如果除了设置数值或者百分数，并且还加了一个“fill”，

那么区域5就会作为背景填充进元素content，如：

border-image-slice: 25 11 fill;

注意：slice不接受负值；

如果slice切割的左右距离之和大于背景图的宽，则上下边框不显示。

如果slice切割的上下距离之和大于背景图的高，则左右边框不显示。

border-image-width

图片边框的宽度。只接受数值，且不能加单位。

border-image-repeat

图像边框是否应平铺(repeat)、铺满(rounded)或拉伸(stretch)。

而无论怎样铺，四个角，即区域1,3,7,9是不会重复铺，只会被相应拉伸。

下面以最为经典的图为例吧：

原图如下：

stretch(默认值)

.box{width: 50px;height: 50px;border: 40px solid transparent;border-image-source: url("img/border.png");border-image-slice: 27 fill;border-image-repeat: stretch;}
<div class="box"></div>

效果如图：

可以看到每个区域都被横向和纵向拉伸了

repeat

.box{width: 100px;height: 100px;border: 40px solid transparent;border-image-source: url("img/border.png");border-image-slice: 27 fill;border-image-repeat: repeat;}
<div class="box"></div>

效果如图：

可以看到背景在以原形状等比例缩放以后，持续平铺，

所以repeat容易出现断层,不推荐。

round

.box{width: 100px;height: 100px;border: 40px solid transparent;border-image-source: url("img/border.png");border-image-slice: 27 fill;border-image-repeat: round;}
<div class="box"></div>

效果如图：

同样是重复平铺，但是round会处理得更平滑，不会出现断层情况，

因此round通常比repeat更常用。

border-image-outset

边框图像区域超出边框的量。

格式：border-image-outset : length | number。

length是数值加单位“px”，number指的是相对于边框宽度增加的倍数。

下面举例来说明：

length

box{width: 50px;height: 50px;border: 27px solid transparent;border-image-source: url("img/border.png");border-image-outset: 10px;border-image-slice: 27 fill;border-image-repeat: round;}
<div class="box"></div>

效果如图：

其中青绿色的区域是扩展出来的内容宽度10px

number

body{padding: 60px;}
box{width: 50px;height: 50px;border: 27px solid transparent;border-image-source: url("img/border.png");border-image-outset: 1;border-image-slice: 27 fill;border-image-repeat: round;}
<div class="box"></div>

效果如图：

border的宽度是27px，设置超出1倍，就是超出27px，即图中青绿色区域。

大家可以试试不加body的padding属性，会发现div显示不完整。

所以，想要扩展div的大小直接设置width和height就好了，用boder-image-outset有点鸡肋,不推荐。

不得不说的border-image坑

新版Chrome浏览器border-image属性不生效: 在stack overflow找到答案，说是在用border-image属性之前加上该属性即可：border：27px solid transparent；后看到国内某博主说只要设置成border: 27px soild;就行。后经尝试，确实如此。; 复合属性需要添加浏览器前缀，单个属性不需添加前缀; 当使用复合属性时，需要添加前缀，像这样：

border-image: url("img/border.png") fill 10;    /*IE11*/
-webkit-border-image: url("img/border.png") 10;    /*Chrome和Safari*/
-moz-border-image: url("img/border.png") fill 10;    /*Firefox*/
-o-border-image: url("img/border.png") 10;    /*Opera*/

注意：IE和火狐都添加了fill，否则背景不会自动填充到元素的content。

一旦使用了单个属性，那么就不能添加前缀，否则不生效。

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_stretch {/*注意:在使用border-image之前必须加上border先!*/border:40px solid transparent;width: 50px;height: 50px;border-image-source: url(border_css3.png);border-image-slice: 27 fill;border-image-repeat: stretch;}#id_div_repeat {/*注意:在使用border-image之前必须加上border先!*/border:40px solid transparent;width: 100px;height: 100px;border-image-source: url(border_css3.png);border-image-slice: 27 fill;border-image-repeat: repeat;}#id_div_round {/*注意:在使用border-image之前必须加上border先!*/border:40px solid transparent;width: 100px;height: 100px;border-image-source: url(border_css3.png);border-image-slice: 27 fill;border-image-repeat: round;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>border-image属性可以将图片作为盒子边框<br/>IE不支持border-image属性</div><br/><div id="id_div_stretch"></div><br/><div id="id_div_repeat"></div><br/><div id="id_div_round"></div><p>图片素材border.png如下:<img src="border_css3.png" /></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer> </body>
</html>

效果如下:

按钮示例

背景图片如下：

先来一个短一点的按钮。

.box{width: 100px;height: 30px;border: 14px solid transparent;border-image-source: url("img/btn.png");border-image-slice: 14 fill;}
<div class="box"></div>

效果如图：

现在仅仅修改“width:200px”,结果按钮的长度就自动增加了，是不是很方便？

CSS3 圆角

使用了CSS3 border-radius属性的界面显示如下图

您可以尝试使用CSS3 圆角制作器制作您的第一个css3圆角！

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

属性	IE	Google Chrome	Fire fox	Safari	Opera
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 border-radius 属性

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

以下为三个实例:

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_p_radius1 {/*添加圆角核心代码*/border-radius: 25px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius2 {/*添加圆角核心代码*/border-radius: 25px;/*带边框的圆角*/border:2px solid #8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius3 {/*添加圆角核心代码*/border-radius: 25px;/*用图案作背景repeat的圆角*/background:url(paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p id="id_p_radius1">纯背景的圆角</p><p id="id_p_radius2">带border的圆角</p><p id="id_p_radius3">用图案作背景repeat的圆角</p><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>border-radius属性可以给元素添加圆角</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer> </body>
</html>

效果如下:

核心代码:

#rcorners1{

    border-radius:25px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners2{

    border-radius:25px;

    border:2px solid #8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners3{

    border-radius:25px;

    background:url(/statics/images/course/paper.gif);

    background-position:left top;

    background-repeat:repeat;

    padding:20px;

    width:200px;

    height:150px;

}

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

3. 两个值 - border-radius: 15px 50px:

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_p_radius2 {/*添加圆角核心代码*/border-radius: 40px 80px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius3 {/*添加圆角核心代码*/border-radius: 20px 40px 80px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius4 {/*添加圆角核心代码*/border-radius: 10px 20px 40px 80px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p id="id_p_radius2">2个对角值的圆角<br/>即左上右下(40),右上左下(80)</p><p id="id_p_radius3">3个值的圆角<br/>即左上(20),右上左下(40),右下(80)</p><p id="id_p_radius4">4个值的圆角<br/>即左上(10),右上(20),右下(40),左下(80)</p><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>border-radius属性可以给元素添加圆角<br/>3个值的情况:左上角,右上和左下,右下角</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer> </body>
</html>

效果如下:

核心代码:

#rcorners4{

    border-radius:15px 50px 30px 5px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners5{

    border-radius:15px 50px 30px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners6{

    border-radius:15px 50px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

您还可以创建椭圆边角

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_p_radius1 {/*添加圆角核心代码*/border-radius: 50px/15px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius2 {/*添加圆角核心代码*/border-radius: 15px/50px;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}#id_p_radius3 {/*添加圆角核心代码*/border-radius: 50%;/*纯背景色的圆角*/background:#8AC007;padding: 20px;width: 200px;height: 150px;margin: 0 auto;margin-top: 15px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p id="id_p_radius1">border-radius: 50px/15px;</p><p id="id_p_radius2">border-radius: 15px/50px;</p><p id="id_p_radius3">border-radius: 50%;</p><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>border-radius属性可以给元素添加圆角</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer> </body>
</html>

效果如下:

核心代码:

#rcorners7{

    border-radius:50px/15px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners8{

    border-radius:15px/50px;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

#rcorners9{

    border-radius:50%;

    background:#8AC007;

    padding:20px;

    width:200px;

    height:150px;

}

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

通过以上5种圆角属性，希望您能够做出最满意的圆角。

CSS3 背景

CSS3更新了几个新的背景属性，提供更强大背景元素控制，通过这几个背景属性，您能够做出更加精美的样式，。

在本节中您将了解以下4种背景属性：

background-image
background-size
background-origin
background-clip

此外您还将学习如何使用多重背景图像。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	FireFox	Safari	Opera
background-image (with multiple backgrounds)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
background-origin	1.0	9.0	4.0	3.0	10.5
background-clip	4.0	9.0	4.0	3.0	10.5

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张:

最左边的图片在最上方,最右边的图片在最下方

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div {/*最右边的图片在最下方;最左边的图片在最上方*/background-image: url(img_flower.gif),url(paper.gif);background-position: right bottom,left top;background-repeat: no-repeat,repeat;padding: 15px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div"><h2>那朵花</h2><p>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</p></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-image<br/>最左边的图片在最上方,最右边的图片在最下方</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer> </body>
</html>

效果如下:

核心代码: 最左边的图片在最上方,最右边的图自在最下方

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

可以使用简写属性background同时给多个不同的图片设置多个不同的属性:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*background-image: url("sakura4.png");background-repeat: no-repeat;background-position: center center;*//*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div {/*最右边的图片在最下方;最左边的图片在最上方*/background:url(img_flower.gif) right bottom no-repeat,url(paper.gif) left top repeat;padding: 15px;}  </style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div"><h2>那朵花</h2><p>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</p></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-image<br/>最左边的图片在最上方,最右边的图片在最下方</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

#example1 {

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

CSS3 background-size 属性

background-size指定背景图像的大小。

在CSS2时代，背景图像大小由图像的实际大小决定。

到了CSS3的新时代,我们可以指定背景图片大小，让我们重新在不同的环境中指定背景图片的大小。

您可以指定任意的像素或百分比大小。

你指定的大小是 相对于父元素的宽度和高度 的百分比的大小。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;background:url(img_flower.gif);background-size: 80px 60px;background-repeat: no-repeat;padding-top: 40px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</p><p>原始图片大小:<img src="img_flower.gif" alt="花" width="224" height="162" /></p><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-size可以指定背景图片的大小<br/>该大小是 相对于父元素的宽度和高度 的百分比的大小。</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>        </footer>
</body>
</html>

效果如下:

核心代码:

重置背景图像：

div

{

background:url(img_flower.gif);

background-size:80px 60px;

background-repeat:no-repeat;

}

实例 2

伸展背景图像完全填充div的内容区域：

div {

background:url(img_flower.gif);

background-size:100% 100%;

background-repeat:no-repeat;

}

效果如下:

CSS3的background-Origin属性位置区域

background-Origin属性指定了背景图像的位置区域。

分别在content-box, padding-box,和 border-box区域内可以放置 背景图像。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}div {border:1px solid pink;padding: 35px;background-image: url("sakura.png");background-repeat: no-repeat;background-position: left;}#id_div_border_box {/*指定背景放置的区域*/background-origin:border-box;}#id_div_content_box {background-origin:content-box;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_border_box">background-origin:border-box;在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</div><div id="id_div_content_box">background-origin:content-box;在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-origin可以指定背景图片放置的位置区域<br/>border-box、padding-box、content-box</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>        </footer>
</body>
</html>

效果如下:

核心代码:

在 content-box 中定位背景图片：

div

{

background:url(img_flwr.gif);

background-repeat:no-repeat;

background-size:100% 100%;

background-origin:content-box;

}

CSS3 多个背景图像

CSS3 允许你在元素中添加多个背景图像。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div {background-image: url("img_flower.gif"),url("paper.gif");background-position: right bottom,left top;background-repeat: no-repeat,repeat;padding: 15px;}</style>
</head><body><div id="id_div"><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？轻轻摇曳着，一碰会微微刺痛，靠近一闻，隐约有股青涩的阳光的气息。那气息渐渐地淡去，我们也在慢慢长大。可是，那朵花一定还在某个地方盛开着……对，我们永远都会继续实现那朵花的愿望。</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-image可以指定多个图片作为背景<br/>最左边的在最上面,最右边的图片在最下方</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer>
</body>
</html>

效果如下:

核心代码:

在 body 元素中设置两个背景图像：

body { /*最左边的在最上面,最右边的在最下方*/

background-image:url(img_flower.gif),url(paper.gif);

}

CSS3 background-clip属性

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

border-box(默认)、padding-box、content-box

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_border_box {color: rgba(255,255,255,0.8);border:10px dotted black;padding: 25px;background:Teal;}#id_div_padding_box {color: rgba(255,255,255,0.8);border:10px dotted black;padding: 25px;background:green;background-clip: padding-box;}#id_div_content_box {border:10px dotted black;padding: 25px;background:pink;background-clip: content-box;}</style>
</head><body><div id="id_div_border_box"><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？</div><br/><div id="id_div_padding_box"><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？</div><br/><div id="id_div_content_box"><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1>在我们走过的季节里，路旁盛开的花朵也在不断变化，那个季节盛开的花是叫什么来着？</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background-clip可以指定位置开始绘制背景<br/>border-box、padding-box、content-box</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

#example1 {

border: 10px dotted black;

padding: 35px;

background: yellow;

background-clip: content-box;

}

新的背景属性

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

新的CSS3背景属性中，您不仅能够规定背景的绘制区域，对于背景图片的定位区域和尺寸也同样能够惊喜设置！

CSS3 渐变（Gradient）

CSS3 渐变（Gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用PS图像来实现这些效果。

但是，通过使用 CSS3 渐变（Gradient），你可以减少下载的事件和宽带的使用。

此外，渐变效果的元素在放大时看起来效果更好，因为渐变（Gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（Gradient）：

线性渐变（Linear Gradient）- 向上/向右/向下/向左/对角方向
径向渐变（Radial Gradient）- 由它们的中心定义

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性	IE	Chrome	FireFox	Safari	Opera
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

CSS3 线性渐变 Linear Gradient

为了创建一个线性渐变，你必须至少定义两种颜色结点。

颜色结点即你想要呈现平稳过渡的颜色。

同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色:

注意：IE 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(red,blue);/*标准写法放最后面*/background:linear-gradient(red,blue);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持linear-gradient和radial-gradient</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

从上到下的线性渐变：

#grad {

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

}

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

     #id_div_linear_gradient_1 {height: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(left,red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(right,red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(right,red,blue);/*标准写法放最后面*/background:linear-gradient(to right,red,blue);}

效果如下:

核心代码:

从左到右的线性渐变：

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色

注意：IE 9 及之前的版本不支持渐变。

代码如下:

        #id_div_linear_gradient_1 {height: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(left top,red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(bottom right,red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(bottom right,red,blue);/*标准写法放最后面*/background:linear-gradient(to bottom right,red,blue);}

效果如下:

核心代码:

从左上角到右下角的线性渐变：

#grad {

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

}

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，

而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background: linear-gradient(angle, color-stop1, color-stop2);

角度是逆时针方向计算。

换句话说，0deg 将创建一个从下到上的渐变，

90deg 将创建一个从左到右的渐变。

180deg 将创建一个从上到下的渐变。

重申一次:

0deg 将创建一个从下到上的渐变， (从圆心指向12点)

90deg 将创建一个从左到右的渐变。(从圆心指向15点)

180deg 将创建一个从上到下的渐变。(从圆心指向18点)

注意：Internet Explorer 9 及之前的版本不支持渐变。

下面的实例演示了如何在线性渐变上使用角度

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(0deg,red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(0deg,red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(0deg,red,blue);/*标准写法放最后面*/background:linear-gradient(0deg,red,blue);}#id_div_linear_gradient_2 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(90deg,red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(90deg,red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(90deg,red,blue);/*标准写法放最后面*/background:linear-gradient(90deg,red,blue);}#id_div_linear_gradient_3 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(180deg,red,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(180deg,red,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(180deg,red,blue);/*标准写法放最后面*/background:linear-gradient(180deg,red,blue);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1" style="color:white;text-align:center;">0度,从下到上渐变(从圆心指向12点)</div><br/><div id="id_div_linear_gradient_2" style="color:white;text-align:center;">90度,从左向右,从圆心指向15点</div><br/><div id="id_div_linear_gradient_3" style="color:white;text-align:center;">180度,从上向下,从圆心指向18点</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持linear-gradient和radial-gradient<br/>还可使用角度,0度,从下到上渐变(从圆心指向12点)<br/>90度,从左向右,从圆心指向15点<br/>180度,从上向下,从圆心指向18点</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer>
</body>
</html>

效果如下:

核心代码:

带有指定的角度的线性渐变：180度,从上到下,从圆心指向18点钟方向

#grad {

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(180deg, red, blue); /* 标准的语法 */

}

使用多个颜色结点百分比

下面的实例演示了如何设置多个颜色结点

background:linear-gradient(red 33.33%,green 50%,blue)
red瓜分整个的33.33%,

green再瓜分剩下的50%
最后的全部给了blue

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(red,green,blue); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(red,green,blue);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(red,green,blue);/*标准写法放最后面*/background:linear-gradient(red,green,blue);}#id_div_linear_gradient_2 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(red,orange,yellow,green,blue,indigo,violet); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*标准写法放最后面*/background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);}#id_div_linear_gradient_3 {height: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(red 10%,green 85%,blue 90%); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(red 10%,green 85%,blue 90%);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(red 10%,green 85%,blue 90%);/*标准写法放最后面red分瓜分整个的33.33%,green再瓜分剩下的50%最后的全部给了blue*/background:linear-gradient(red 33.33%,green 50%,blue);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1" style="color:white;text-align:center;">红绿蓝3色均布</div><br/><div id="id_div_linear_gradient_2" style="color:white;text-align:center;">彩虹七色均布</div><br/><div id="id_div_linear_gradient_3" style="color:white;text-align:center;">红绿蓝3色不均布<br/>background:linear-gradient(red 33.33%,green 50%,blue)<br/>red瓜分整个的33.33%,<br/>green再瓜分剩下的50%<br/>最后的全部给了blue</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持linear-gradient和radial-gradient<br/></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

带有多个颜色结点的从上到下的线性渐变：

#grad {

background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, green, blue); /* 标准的语法 */

}

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 55px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(red,orange,yellow,green,blue,indigo,violet); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(red,orange,yellow,green,blue,indigo,violet);/*标准写法放最后面*/background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1" style="color:#fff;text-align:center;margin:auto;font-size:40px;font-weight:bold;">红绿蓝3色均布</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持linear-gradient和radial-gradient<br/></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

#grad {

/* Safari 5.1 - 6.0 */

background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

/* Opera 11.1 - 12.0 */

background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

/* Firefox 3.6 - 15 */

background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

/* 标准的语法 */

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

}

使用透明度（Transparency）

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*兼容Opera 11.1 - 12.0*/background:-o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));/*兼容Firefox 3.6 - 15*/background:-moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));/*标准写法放最后面*/background:linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持linear-gradient和radial-gradient<br/>rgba可以创建半透明颜色</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

从左到右的线性渐变，带有透明度：

#grad {

background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */

background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/

background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

}

重复的线性渐变牛X

repeating-linear-gradient() 函数用于重复线性渐变：

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}#id_div_linear_gradient_1 {height: 100px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-repeating-linear-gradient(red,yellow 10%,green 20%); /*兼容Opera 11.1 - 12.0*/background:-o-repeating-linear-gradient(red,yellow 10%,green 20%);/*兼容Firefox 3.6 - 15*/background:-moz-repeating-linear-gradient(red,yellow 10%,green 20%);/*标准写法放最后面这儿的百分比,是什么意思???*/background:repeating-linear-gradient(red,yellow 10%,green 20%);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div id="id_div_linear_gradient_1"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持repeating-linear-gradient<br/></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer>
</body>
</html>

效果如下:

核心代码: 后面的百分比是啥意思???

一个重复的线性渐变：

#grad {

/* Safari 5.1 - 6.0 */

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

/* Opera 11.1 - 12.0 */

background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

/* Firefox 3.6 - 15 */

background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

/* 标准的语法 */

background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

CSS3 径向渐变

径向渐变由它的中心定义。

通过repeating-linear-gradient创建一个条纹的背景:

代码如下: 黑,黑,蓝,蓝 4个颜色的135度的重复渐变

        .class_div_slide {height: 100px;background: repeating-linear-gradient(135deg, black, black .15em, #0092b7 0, #0092b7 .85em);}

效果如下:

一个复杂的重复径向渐变的demo

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_div_container {display: inline-block;overflow: hidden;width: 400px; height: 300px;border-radius: 10px;box-shadow: 0 6px #99907e;background: #b5ac9a;}.class_div_record {position: relative;margin: 19px auto;width: 262px; height: 262px;border-radius: 50%;background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);background-size: 50% 100%, 100% 50%, 100% 100%;}.class_div_record:after {position: absolute;top: 50%; left: 50%;margin: -35px;border: solid 1px #d9a388;width: 68px; height: 68px;border-radius: 50%;box-shadow: 0 0 0 4px #da5b33,inset 0 0 0 27px #da5b33;background: #b5ac9a;content: '';}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_container"><div class="class_div_record"></div></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持repeating-radial-gradient<br/>      </p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer>
</body>
</html>

效果如下:

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。

同时，你也可以指定渐变的中心、形状（椭圆形或圆型）、大小。

默认情况下，渐变的中心是 center（表示在中心点），

渐变的形状是 ellipse（表示椭圆形），

渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）

注意：Internet Explorer 9 及之前的版本不支持渐变。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_div{margin: auto;height: 150px;width: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(red,green,blue);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(red,green,blue);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(red,green,blue);/*标准写法放最后面*/background:radial-gradient(red,green,blue);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持radial-gradient</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

颜色结点均匀分布的径向渐变：

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 标准的语法 */

}

径向渐变 - 颜色结点不均匀分布

代码如下:

        .class_div{margin: auto;height: 150px;width: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(red 33.33%,green 50%,blue 100%);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(red 33.33%,green 50%,blue 100%);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(red 33.33%,green 50%,blue 100%);/*标准写法放最后面red 33.33%,green 50%,blue 100%表示:<br/>红色占整个的3分之1,绿色占剩下的1/2,蓝色占剩下的剩下的*/background:radial-gradient(red 33.33%,green 50%,blue 100%);}

效果如下:

核心代码:

颜色结点不均匀分布的径向渐变：

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */

background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */

}

设置形状

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

代码如下:

        /*径向渐变的形状默认是ellipse*/.class_div_ellipse {margin: auto;height: 150px;width: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(red,green,blue);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(red,green,blue);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(red,green,blue);/*标准写法放最后面*/background:radial-gradient(red,green,blue);}/*径向渐变的形状也可以指定为circle*/.class_div_circle {margin: auto;height: 150px;width: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(circle,red,green,blue);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(circle,red,green,blue);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(circle,red,green,blue);/*标准写法放最后面*/background:radial-gradient(circle,red,green,blue);}

效果如下:

核心代码:

形状为圆形的径向渐变：

#grad {

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */

background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */

}

不同尺寸大小关键字的使用 ???有啥区别???百分数是啥意思???

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

定义大小size

size主要用于定义径向渐变的结束形状大小。

size参数取值

属性值说明

closet-side 指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}/*closest-side*/.class_div_closest_side {margin: auto;height: 150px;width: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(60% 55%,closest-side,blue,green,yellow,black);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(60% 55%,closest-side,blue,green,yellow,black);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(60% 55%,closest-side,blue,green,yellow,black);/*标准写法放最后面*/background:radial-gradient(60% 55%,closest-side,blue,green,yellow,black);}/*farthest-side*/.class_div_farthest_side {margin: auto;height: 150px;width: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(60% 55%,farthest-side,blue,green,yellow,black);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(60% 55%,farthest-side,blue,green,yellow,black);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(60% 55%,farthest-side,blue,green,yellow,black);/*标准写法放最后面*/background:radial-gradient(60% 55%,farthest-side,blue,green,yellow,black);}/*closest-corner*/.class_div_closest_corner {margin: auto;height: 150px;width: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(60% 55%,closest-corner,blue,green,yellow,black);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(60% 55%,closest-corner,blue,green,yellow,black);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(60% 55%,closest-corner,blue,green,yellow,black);/*标准写法放最后面*/background:radial-gradient(60% 55%,closest-corner,blue,green,yellow,black);}/*farthest-corner*/.class_div_farthest_corner {margin: auto;height: 150px;width: 150px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-radial-gradient(60% 55%,farthest-corner,blue,green,yellow,black);/*兼容Opera 11.1 - 12.0*/background:-o-radial-gradient(60% 55%,farthest-corner,blue,green,yellow,black);/*兼容Firefox 3.6 - 15*/background:-moz-radial-gradient(60% 55%,farthest-corner,blue,green,yellow,black);/*标准写法放最后面*/background:radial-gradient(60% 55%,farthest-corner,blue,green,yellow,black);}div {color: white;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_closest_side">closest_side</div><br/><div class="class_div_farthest_side">farthest_side</div><br/><div class="class_div_closest_corner">closest_corner</div><br/><div class="class_div_farthest_corner">farthest_corner</div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持radial-gradient<br/>形状可以是ellipse(默认)或circle</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

closest-side
farthest-side
closest-corner
farthest-corner

核心代码:

带有不同尺寸大小关键字的径向渐变：

#grad1 {

/* Safari 5.1 - 6.0 */

background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

/* Opera 11.6 - 12.0 */

background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

/* Firefox 3.6 - 15 */

background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

/* 标准的语法 */

background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

}

#grad2 {

/* Safari 5.1 - 6.0 */

background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

/* Opera 11.6 - 12.0 */

background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

/* Firefox 3.6 - 15 */

background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

/* 标准的语法 */

background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

}

重复的径向渐变百分数是什么意思???

repeating-radial-gradient() 函数用于重复径向渐变:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_div {margin: auto;height: 150px;width: 200px;/*兼容 Safari 5.1 - 6.0*/background:-webkit-repeating-radial-gradient(red,yellow 10%,green 15%);/*兼容Opera 11.1 - 12.0*/background:-o-repeating-radial-gradient(red,yellow 10%,green 15%);/*兼容Firefox 3.6 - 15*/background:-moz-repeating-radial-gradient(red,yellow 10%,green 15%);/*标准写法放最后面*/background:repeating-radial-gradient(red,yellow 10%,green 15%);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>background属性支持repeating-radial-gradient</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

实例

一个重复的径向渐变：

#grad {

/* Safari 5.1 - 6.0 */

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);

/* Opera 11.6 - 12.0 */

background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);

/* Firefox 3.6 - 15 */

background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

/* 标准的语法 */

background: repeating-radial-gradient(red, yellow 10%, green 15%);

}

以上便是本节CSS3渐变的全部内容，通过学习，希望您能够多进行实战练习，灵活掌握渐变，能够让您的样式更加美观！

CSS3 文本效果

CSS3中包含几个新的文本特征。

在本节中您将了解以下文本属性：

text-shadow 文本阴影
box-shadow 盒子阴影
text-overflow
word-wrap
word-break

浏览器支持

属性	Chrome	IE	Firefox	Safari	Opera
text-shadow	4.0	10.0	3.5	4.0	9.5
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-
word-wrap	23.0	5.5	3.5	6.1	12.1
word-break	4.0	5.5	15.0	3.1	15.0

CSS3的文本阴影 text-shadow

CSS3中，text-shadow属性适用于文本阴影。

注意:Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_h1_shadow {/*x y distance color*/text-shadow:5px 5px 5px #f00;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div"></div><h1 class="class_h1_shadow">可塑性记忆</h1><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>text-shadow属性:x,y,distance,color;</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

给标题添加阴影:

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

CSS3 box-shadow属性盒子阴影

CSS3 中 CSS3 box-shadow 属性适用于 盒子阴影

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_div_box_shadow {margin: auto;width: 300px;height: 100px;background-color: green;/*x y distance color*/box-shadow: 10px 10px 5px #888;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_box_shadow"></div><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>box-shadow属性:x,y,distance,color;</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

div{box-shadow:10px10px 5px #888;}

接下来给阴影添加颜色,但不加模糊效果

核心代码

div{box-shadow:10px10pxgrey;}

接下来给阴影添加一个模糊效果

实例

div{box-shadow:10px10px5pxgrey;}

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}.class_div_box_shadow {/*相对布局做父容器*/margin:auto;position: relative;width: 400px;padding: 10px;background:white;/*-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.5);-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.5);*//*标准的写最后面*//*box-shadow: 1px 2px 4px rgba(0,0,0,0.5);*/}.class_div_box_shadow img {width: 400px;border:1px solid #eee;/**/border-style: inset;}/*重点要在父容器后面手工制作一个div带阴影*/.class_div_box_shadow::after {content: '';/*绝对定位,相对于已经定位的父容器*/position: absolute;/*宽度为父容器的70%*/width: 70%;/*距左边15%,那么距离右边也是15%,因为15% + 70% + 15% = 100%*/left: 15%;height: 100px;/*关键的一行代码,让它与父容器底部对齐,这样它的阴影就会像是父容器的阴影似的*/bottom:0;/*手工制作的div还阴影必须在img的下方*/z-index: -1;-webkit-box-shadow:0 15px 20px rgba(0,0,0,0.3);-moz-box-shadow:0 15px 20px rgba(0,0,0,0.3);box-shadow:0 15px 20px rgba(0,0,0,0.3);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_box_shadow"><img src="menma.png" alt="面码" width="400" height="400" /></div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>box-shadow属性:x,y,distance,color;</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

#boxshadow{

position:relative;

box-shadow:1px2px4pxrgba(0,0,0,.5);

padding:10px;background:white;

}

#boxshadowimg{

width:100%;

border:1pxsolid#8a4419;

border-style:inset;

}

#boxshadow::after{

content:'';

position:absolute;

z-index:-1;/*hide shadow behind image*/

box-shadow:015px20pxrgba(0,0,0,0.3);

width:70%;

left:15%;/*one half of the remaining 30%*/

height:100px;

bottom:0;

}

阴影的一个使用特例是卡片效果

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 0;padding: 0;}div.class_div_card {margin: auto;width: 250px;text-align: center;/*还可以加几次阴影*/box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}div.class_div_header {background-color: #4CAF50;color: white;padding: 10px;font-size: 40px;}div.class_div_content {padding: 10px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_card"><div class="class_div_header"><h1>67</h1></div><div class="class_div_content"><p>2018-05-20</p></div></div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>box-shadow属性:x,y,distance,color;<br/>可以创建纸质样式的卡片效果</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

div.card{

width:250px;

box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);

text-align:center;

}

再补充一个图片卡片效果的demo:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}div {margin:0 auto;text-align: center;}div.class_div_container {width: 310px;padding: 10px;background-color: white;/*还可以加几次阴影*/box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}div.class_div_rotate_left {/*float:left;*//*IE 9*/-ms-transform:rotate(7deg);/*Firefox*/-moz-transform:rotate(7deg);/*Safari and Chrome*/-webkit-transform:rotate(7deg);/*Opera*/-o-transform:rotate(7deg);transform:rotate(7deg);}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div class="class_div_container class_div_rotate_left"><img src="menma.png" alt="面码" width="300" height="300" /><p class="class_p_content">あの日見た花の名前を僕達はまだ知らない</p></div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>box-shadow属性:x,y,distance,color;<br/>可以创建纸质样式的卡片效果</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>        </footer>
</body>
</html>

效果如下:

CSS3 Text Overflow属性

CSS3文本溢出属性(text-overflow属性)指定应向用户如何用3种方式显示溢出内容:

1.ellipsis

2.clip

3.自定义 (自定义只在firefox下有效)

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}div.class_div {width: 10em;border:1px solid #888;/*不折叠*/white-space: nowrap;/*超出的部分隐藏*/overflow:hidden;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p>text-overflow属性值为ellipsis;</p><div style="text-overflow:ellipsis;" class="class_div">I cross the time of ocean to find you.</div><p>text-overflow属性值为clip;</p><div style="text-overflow:clip;" class="class_div">I cross the time of ocean to find you.</div><p>text-overflow属性值为自定义的'>>>';<br/>这个自定义效果只在firefox上才有效</p><div style="text-overflow:'>>>';" class="class_div">I cross the time of ocean to find you.</div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>box-shadow属性:x,y,distance,color;<br/>可以创建纸质样式的卡片效果</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

p.test1{

white-space:nowrap;

width:200px;

border:1pxsolid#000000;

overflow:hidden;

text-overflow:clip;

}

p.test2{

white-space:nowrap;

width:200px;

border:1pxsolid#000000;

overflow:hidden;

text-overflow:ellipsis;

}

CSS3的强制换行 word-wrap属性

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性,允许您设置word-wrap属性的值为break-word,

从而强制文本换行 - 即使这意味着分裂它中间的一个字：

CSS代码如下

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}/**/p.class_p_word_wrap {width: 12em;border:1px solid Teal;/**/word-wrap:break-word;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p class="class_p_word_wrap">I crossed the oceans of time to find you.I crossed the oceans of time to find you.I crossed the oceans of time to find you.I crossed the oceans of time to find you.I crossed the oceans of time to find you.</p><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>word-wrap属性:<br/>值为bread-word时,将从word处换行</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>      </footer>
</body>
</html>

效果如下:

核心代码:

word-wrap属性值为break-word允许长文本从word处进行换行:

p {word-wrap:break-word;}

CSS3 单词拆分换行 word-break属性

CSS3 单词拆分换行属性(word-break属性)指定换行规则:

keep-all 还是 break-all

注意:word-break 属性不兼容 Opera.

CSS代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}/*将从连接符处断开,尽量保证单词完整*/p.class_p_word_break_keep_all {width: 9em;border:1px solid Teal;/*将从连接符处断开,尽量保证单词完整*/word-break:keep-all;}/*将从任意字母处断开*/p.class_p_word_break_break_all {width: 9em;border:1px solid Teal;/*将从任意字母处断开*/word-break:break-all;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><p class="class_p_word_break_keep_all">This line will-break-at-hyphenates.This line will-break-at-hyphenates.This line will-break-at-hyphenates.</p><p class="class_p_word_break_break_all">The lines will break at any character.The lines will break at any character.The lines will break at any character.</p><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>word-break属性:<br/>keep-all将从连接符处断开,尽量保证单词完整性<br/>break-all将从任意字母处断开</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

p.test1{

word-break:keep-all;

}

p.test2{

word-break:break-all;

}

New Text Properties

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

CSS3 字体

CSS3 @font-face 规则

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体，不能够使用离线字体，

但是,现在! 通过CSS3，web设计师可以任性地使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
@font-face	4.0	9.0	3.5	3.2	10.0

IE 9+, Firefox, Chrome, Safari, 和 Opera 全都支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

IE 还支持 EOT (Embedded OpenType) 字体.

需要注意的是： IE 8 以及更早的版本不支持新的 @font-face 规则。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 beyondFont），并指向该字体文件所在路径。

	提示：url请使用小写字母的字体，大写字母在IE中会产生意外的结果喔~

如果需要为 HTML 元素使用特殊的字体，请通过 font-family 属性来引用字体的名称 (beyondFont)，

通过下面的实例您可以尝试操作一下：

Sansation_Light.ttf如下:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}/*先声明自定义字体*/@font-face {font-family: beyondFont;/*IE9 只支持eot字体*/src:url('Sansation_Light.ttf'),url('Sansation_Light.eot');}/*再使用自定义的字体*/div {margin:auto;text-align: center;font-family: beyondFont;font-size: 26px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>I cross the oceans of time to find you.</div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>@font-face{}可自定义字体<br/>IE9 只支持eot字体</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>       </footer>
</body>
</html>

效果如下:

核心代码:

使用粗体文本

您必须添加另一个包含粗体文字的@font-face规则:

Sansation_Bold.ttf字体文件如下:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head><link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">body{font-size: 100%;/*声明margin和padding是个好习惯*/margin: 10;padding: 0;}/*先声明自定义字体*/@font-face {font-family: beyondFont;/*IE9 只支持eot字体*/src:url('Sansation_Light.ttf'),url('Sansation_Light.eot');}/*新增:定义一个粗号的字体*/@font-face {font-family: beyondFont;src:url('Sansation_Bold.ttf');/*新增:指明该字体是属于粗体时用的*/font-weight: bold;}/*再使用自定义的字体*/div {margin:auto;text-align: center;font-family: beyondFont;font-size: 26px;}</style>
</head><body><h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">未 闻 花 名</h1><div>I cross the oceans of <b>time</b> to find <b>you</b>.</div><br/><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>@font-face{}可自定义字体<br/>IE9 只支持eot字体</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a></p>     </footer>
</body>
</html>

效果如下:

核心代码:

@font-face

{

   font-family: myFirstFont;

   src: url(sansation_bold.woff);

   font-weight:bold;

}

该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。

浏览器使用"beyondFont"字体系列时,当遇到了粗体时,应该就会呈现为粗体啦~

这样你就可以有许多相同的字体@font-face的规则。

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

您最好收藏或者保存好上表中的字体描述，以便您将来编程时需要用，方面查找！这将会为您省去很多宝贵的工作时间。

未完待续,下一章节,つづく