淘先锋技术网

首页 1 2 3 4 5 6 7

【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等

一、CSS3边框(重要)

        用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

1.1 CSS3边框圆角

        在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

        在 CSS3 中，很容易创建圆角。

        在 CSS3 中 border-radius 属性被用于创建圆角：使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

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

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

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

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

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

        一个值： 四个圆角值相同。

属性描述
border-radius所有四个边角 border---radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
<style>
    div
    {
        border:2px solid #a1a1a1;
        padding:10px 40px; 
        background:#dddddd;
        width:300px;
        border-radius:25px;
    }
</style>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>

1.2 CSS3边框阴影(盒子阴影)

        box-shadow属性可以设置一个或多个下拉阴影的框。

        box-shadow: h-shadow v-shadow blur spread color inset;

        boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影外延伸的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影，(默认值为outset)

div{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

1.3 CSS3图片边框

        CSS3中我们可以使用图片作为元素的边框。

值描述
border-image-source

用于指定要用于绘制边框的图像的位置

none 没有图像被使用

image 边框使用图像的路径

border-image-slice图像边界向内偏移(值,直接写数值,九宫格每一份的大小)此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
border-image-width图像边界的宽度
border-image-outset用于指定在边框外部绘制 border-image-area 的量
border-image-repeat用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
border-image简写属性,用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

属性分析:

border-image-source：

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

border-image-slice：

        图片边框向内偏移的距离。格式：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个部分，其中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(默认值)：

<style>
.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;
}
</style>

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

效果如图：

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

repeat:

<style>
.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;
}
</style>

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

效果图如下:

         可以看到背景在以原形状等比例缩放以后，持续平铺，容易出现断层。

round:

<style>
    .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;
    }
</style>

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

效果如图：

        同样是重复平铺，但是round会处理得更平滑，不会出现断层情况，因此round通常比repeat更常用。

border-image-outset:

        边框图像区域超出边框的量。格式：border-image-outset : length | number。length是数值加单位“px”，number指的是相对于边框宽度增加的倍数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片边框</title>
<style>
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

#round
{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
}

#stretch
{
    -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 stretch; /* Opera */
    border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />

</body>
</html>

二、CSS3背景

2.1 CSS3 background-image属性

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

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

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

        也可以通过复合属性来实现;

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

2.2 CSS3 background-size 属性

        background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

        CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

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

值描述
像素值设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

改变背景图片大小:

div {
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

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

div {
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

2.3 CSS3的background-origin属性

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

值描述
padding-box背景图像填充框的相对位置（默认值）
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框

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

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

div {
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

2.4 CSS3 background-clip属性

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

值说明
border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box背景绘制在衬距方框内（剪切成衬距方框）。
content-box背景绘制在内容方框内（剪切成内容方框）。
#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

三、CSS3渐变

3.1 CSS3渐变概述

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

        以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

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

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

  • 径向渐变（Radial Gradients）- 由它们的中心定义

3.2 CSS3 线性渐变

        为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法:

background-image: linear-gradient(direction/degree,color-stop1 占比, color-stop2 占比, ...);

        direction方向：渐变的方向位置，属性值可以为(to)left、right、top、bottom(可组合使用)

        角度：渐变终止方向的角度，角度以deg表示

        起始颜色......

        终止颜色...... (颜色可以是多个)

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

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

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右

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

#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

线性渐变 - 对角

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

#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }

使用角度

        如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

        角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

        但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

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

#grad { background-image: linear-gradient(-90deg, red, yellow); }

使用多个颜色结点(可以设置值改变占据大小)

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

#grad {background-image: linear-gradient(red, yellow, green); }

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

#grad { /* 标准的语法 */ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

使用透明度（transparent）

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

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

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

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

重复的线性渐变

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重复渐变</title>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>

<h1>重复的线性渐变</h1>

<div id="grad1"></div>

<p>45deg:</p>
<div id="grad2"></div>

<p>190deg:</p>
<div id="grad3"></div>

<p>90deg:</p>
<div id="grad4"></div>

<p><strong>注意:</strong> Internet Explorer 9 及更早版本的 IE 浏览器不支持线性渐变。</p>

</body>
</html>

3.3 CSS3 径向渐变

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

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

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

        形状:ellipse（椭圆）/circle（圆形）

        大小(半径)：属性值可用像素或关键字表示(圆形演示)

                closest-side:圆心到距离最近的边

                farthest-side:圆心到距离最远的边

                closest-corner：圆心到距离最近的角

                farthest-corner：圆心到距离最远的角

        发散方向：属性值可以为(at)left、right、top、bottom、center(可组合使用)，像素，百分比

        起始颜色......

        终止颜色......

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

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

#grad { background-image: radial-gradient(red, yellow, green); }

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

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

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

设置形状

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

        形状为圆形的径向渐变：

#grad { background-image: radial-gradient(circle, red, yellow, green); }

不同尺寸大小关键字的使用

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

                closest-side:圆心到距离最近的边

                farthest-side:圆心到距离最远的边

                closest-corner：圆心到距离最近的角

                farthest-corner：圆心到距离最远的角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变尺寸</title>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>
<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

重复的径向渐变

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

#grad1 {height: 200px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}

四、CSS3 文本效果

4.1 CSS3 的文本阴影

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

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

        给标题添加阴影:

h1 { 
    text-shadow: 5px 5px 5px #FF0000; 
}

4.2 CSS3 box-shadow属性

        boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

        box-shadow: h-shadow v-shadow blur spread color inset;

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

设置盒子阴影

div { box-shadow: 10px 10px 5px grey; }

使用阴影实现文字卡片效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字卡片</title>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}
</style>
</head>
<body>

<h2>卡片</h2>

<p>box-shadow 属性用来可以创建纸质样式卡片:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

</body>
</html>

使用阴影实现图片卡片效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片卡片效果</title>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2> 卡片</h2>

<p>box-shadow属性可以用来创建纸质样式卡片:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

4.3 CSS3 text-overflow属性

        CSS3文本溢出属性指定应向用户如何显示溢出内容

值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。(只在 Firefox 浏览器下有效)
p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

4.4 CSS3单词拆分换行

        word-break 规定非中日韩文本的换行规则。

值描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
<style>
p.test1
{
    width:9em;
    border:1px solid #000000;
    word-break:keep-all;
}

p.test2
{
    width:9em;
    border:1px solid #000000;
    word-break:break-all;
}
</style>

<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>

<p><b>注意:</b>  word-break 属性不兼容 Opera.</p>

五、CSS3字体(服务器端字体)

        使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

        使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

        当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

        您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

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

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

        如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>
    @font-face {
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }
    div {
        font-family:myFirstFont;
    }
</style>