一篇文章教会你使用HTML5加载音频和视频

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

【二、嵌入视频】

下面是在 Web 页面中嵌入视频文件最简单的形式:

 <video src="img/sounds/mu04.mp3"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

  1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
  2. mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/3.mp4" type="video/ogg" />
       <source src="img/sounds/3.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

【四、嵌入音频】

HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

<audio src="img/sounds/mu04.mp3" controls autoplay>
    Your browser does not support the <audio> element.   
</audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/mu04.mp3" type="video/ogg" />
       <source src="img/sounds/mu04.mp3" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3按钮知识

在实际开发中,按钮的应用是必不可少。使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式。

一、平面样式CSS按钮

平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势。,这些的平面样式按钮效果很好看。

以下代码是按钮处于正常的情况下的状态。

例:

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
一篇文章带你了解CSS3按钮知识

1. 按钮颜色

颜色:Green ,Blue, Red, Gray ,Black。

可以使用 background-color 属性来设置按钮颜色。

.button1 {
                background-color: #4CAF50;
            }

            /* Green */
            .button2 {
                background-color: #008CBA;
            }

            /* Blue */
            .button3 {
                background-color: #f44336;
            }

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

            /* Gray */
            .button5 {
                background-color: #555555;
            }
一篇文章带你了解CSS3按钮知识

2. 按钮大小

尺寸10px ,12px ,16px 20px , 24px。

可以使用 font-size 属性来设置按钮大小:

例 :

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }
一篇文章带你了解CSS3按钮知识

3. 圆角按钮

弧度:2px ,4px ,8px ,12px ,50%。

可以使用 border-radius 属性来设置圆角按钮:

例:

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }
一篇文章带你了解CSS3按钮知识

二、边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是,将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。

1. 按钮边框颜色

绿 蓝 红 灰 黑

可以使用 border 属性设置按钮边框颜色:

例:

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
一篇文章带你了解CSS3按钮知识

2. 鼠标悬停按钮

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

提示: 可以使用 transition-duration 属性来设置 “hover” 效果的速度:

例:

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠标放在对应的色块上,显示相对应的颜色。

一篇文章带你了解CSS3按钮知识

3. 按钮阴影

阴影按钮 鼠标悬停后显示阴影。

使用 box-shadow 属性来为按钮添加阴影。

例:

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

4. 按钮宽度

宽度:250px,50% ,100%

默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。

CSS 实例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}
一篇文章带你了解CSS3按钮知识

三、按钮组

1. 移除外边距并添加 float:left 来设置按钮组:

一篇文章带你了解CSS3按钮知识

CSS 实例

.button {
    float: left;
}

2. 带边框按钮组

一篇文章带你了解CSS3按钮知识

可以使用 border 属性来设置带边框的按钮组:

CSS 实例

.button {
    float: left;
    border: 1px solid green
}

四、按钮动画

1. 按样式CSS按钮

这些“按下”式按钮结合了一些平面设计和假象,让用户感觉他们实际上按下了按钮。当用户按下它时,它似乎陷入了页面。它的实现需要用到阴影来设置,使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>   
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

五、总结

本文基于Html基础,主要介绍了Html中按钮组件的使用,对于按钮中需要用到的做了详细的讲解,用丰富的案例 ,多种样式展示,帮助大家去更好的理解 。

最后,希望可以帮助大家更好的学习CSS3。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解HTML格式化元素

一、为什么要格式化元素?

HTML定义了具有特殊意义的特殊元素定义的文本,比如,使用<b>元素<i>来格式化输出,如粗体或斜体文本。

格式化元素被设计用来显示特殊类型的文本。

二、标签

1. b 标签和 strong 标签

常规显示

HTML <b> 元素定义粗体文本,没有任何额外的重要性,例如:

<b>加粗文本内容.</b>

HTML <strong>元素定义粗文本,增加语义的强调。

例如:

<strong>加粗文本.</strong>

2. i标签 和em标签

HTML 斜体文本.元素定义斜体文本,没有任何额外的重要性。

例如:

<i>斜体文本.</i>

HTML <em>元素定义强调文本,增加语义重要性,例如:

<em>强调文本.</em>

注意:

浏览器显示 和相同, 和相同 。然而,有些标签的含义是有区别的: 和 粗体和斜体文本, 但是 和 意味着文本是“重要的”。


3. small 标签

HTML <small> 元素定义了小文字。

例如:

<h2>HTML <small>Small</small> 格式</h2>

4. mark标签

HTML <mark>元素定义标记或突出文本。

例如:

<h2>HTML <mark>标记</mark> 格式</h2>

5. del标签

HTML <del>元素定义了删除(移除)文字。

例如:

<p>我喜欢的颜色是 <del>蓝色</del> 红色.</p>

6. ins标签

HTML <ins>元素定义了插入文本(添加)。

例如:

<p>我喜欢的 <ins>颜色</ins> 是红色.</p>

7. sub标签

HTML 元素定义下标文本。

例如:

<p>这是一个 <sub>下标</sub> 文本.</p>

8. sup标签

HTML 元素定义上标文本。

例如:

<p>这是一个 <sup>上标</sup> 文本.</p>

三、总结

本文对特殊类型的文本的HTML的标签进行了详细的介绍。对遇到的问题进行详细的解答。代码演示效果图能够更好的理解。代码很简单,希望对你有所启发。希望对大家的学习有帮助。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3 3D 转换知识

CSS3 3D变换功能允许在3D空间中变换元素。

一、元素的3D转换

使用CSS3 3D变换功能,可以对三维空间中的元素执行基本的变换操作。如移动,旋转,缩放和倾斜。

变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。

二、使用CSS变换和Transform()函数变换功能

CSS3 transform属性使用变换功能来操纵元素使用的坐标系,以便应用变换效果。

案例描述了3D变换功能。

1. translate3d()

rotation3d()函数将3D空间中的元素围绕[x,y,z]方向向量为圆点旋转指定角度。这可以写成rotate(vx,vy,vz,angle)。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}

.transformed {
-webkit-transform: translate3d(25px, 25px, 50px);
/* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px);
}

img {
width: 125px;
height: 125px;
}
</style>
</head>
<body style="background-color: aqua;">
<h2>Before Translation:</h2>
<div class="container">
<img src="timg.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="timg.jpg" class="transformed" alt="Diamond Card">
</div>
</body>
</html>

该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素,并沿Z轴正方向移动50个像素。

注:

3D变换使用三维坐标系,但是沿Z方向的移动并不总是很明显,因为这些元素存在于二维平面(平面)上并且没有深度。

通过使Z轴上较高的元素(即距观看者更近的元素看起来较大,而离观看者更远的元素看起来更小),可以使用perspective和perspective-origin的CSS属性为场景添加深度感。

注意:

如果对一个元素应用3D变换而不设置透视,结果将不会显示为三维效果。

2. rotate3d()

该rotate3d()函数围绕[x,y,z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(vx, vy, vz, angle)。

例:

.container{
   width: 125px;
   height: 125px;
   perspective: 300px;
   border: 4px solid #a2b058;
   background: #f0f5d8;
}
.transformed {
   -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
   transform: rotate3d(0, 1, 0, 60deg); 
}
img {
width: 125px;
height: 125px;
}

该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。也可以使用负值沿相反方向旋转元素。

3. scale3d()

scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用,否则此功能的效果并不明显。

例:

.container{
   width: 125px;
   height: 125px;
   perspective: 300px;
   border: 4px solid #6486ab;
   background: #e9eef3;
}
.transformed {
   -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
   transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); 
}
img {
width: 125px;
height: 125px;
}

运行结果:

函数scale3d(1, 1, 2)沿Z轴缩放元素,函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。

4. matrix3d()

matrix3d()功能可以一次执行所有3D转换,例如平移,旋转和缩放。它采用4×4转换矩阵]形式的16个参数。

这是使用matrix3d()功能执行3D转换的示例。

示例

.container {

image

但是,一次执行多个转换时,使用单个转换函数并按顺序列出它们会更方便,如下所示:

示例

.container {
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}

.transformed {
-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
/* Chrome, Safari, Opera */
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

img {
width: 125px;
height: 125px;
}

三、总结

本文基于CSS基础,教读者如何去进行2D->3D的转换,介绍了常见的的几个方法。去进行移动、缩放、转动、拉长或拉伸等一系列操作。使用Html语言,使用丰富的案例,以及效果图的展示。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

希望能够帮助你学习。

——————- End ——————-

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。

一、简单的蒙版

代码解析:

本示例使用ID=mask1定义一个蒙版。

<mask>元素内部是一个<rect>元素。<rect>元素定义了蒙版的形状。

定义了一个使用mask的<rect>元素,<rect>元素使用CSS style属性mask内部引用mask ID属性。

例:

<svg width="500" height="120">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff" />
</mask>
</defs>
<rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)" />
</svg>

注:

要显示的矩形的高度为100像素,但垂直的前50个像素是可见的。那是因为蒙版矩形只有50个像素高。矩形仅在蒙版矩形所覆盖的部分中可见。

黑色轮廓矩形是没有蒙版的矩形的大小。

二、其他形状的蒙版

可以使用任何SVG形状作为蒙版。

使用圆圈作为蒙版。

<svg>
 <defs>
   <mask id="mask2" x="0" y="0" width="100" height="100" >
     <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
   </mask>
 </defs>

 <rect x="1" y="1" width="100" height="100"
   style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>

</svg>

运行效果:

注:仅在可见蒙版圆的地方可见引用蒙版的矩形。

三、蒙版形状颜色定义蒙版不透明度

1. 如何去定义不透明度 ?

蒙版形状(圆形或矩形)的填充颜色设置为#ffffff。

蒙版形状的颜色定义使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff(白色),使用蒙版的形状将越不透明。蒙版形状的颜色越接近#000000(黑色),使用蒙版的形状将越透明。

2. 案例

其中蒙版由两个具有不同颜色(#ffffff和#66666)的矩形组成。蒙版用于单个矩形,因此运行效果可以使用蒙版查看蒙版中的两个不同形状如何影响相同形状。

<svg width="500" height="120">
<defs>
 <mask id="mask3" x="0" y="0" width="100" height="100" >

   <rect x="0" y="0"  width="100" height="50"
         style="stroke:none; fill: #ffffff"/>

   <rect x="0" y="50" width="100" height="50"
         style="stroke:none; fill: #666666"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>

<rect x="1" y="1" width="100" height="100"
   style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
 </svg>

运行效果:

四、在蒙版中使用渐变

如果对用作蒙版的形状应用渐变,则可以实现蒙版所应用的形状的渐变透明度。

使用渐变的蒙版,使用蒙版的矩形以及该矩形下的文本,因此可以看到其透明度如何随着蒙版的渐变而变化。

例:

<svg width="500" height="120">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
<stop offset="100%" stop-color="#000000" stop-opacity="1" />
</linearGradient>

<mask id="mask4" x="0" y="0" width="200" height="100">
<rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)" />
</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #FF0000; mask: url(#mask4)" />
</svg>

运行效果:

注:渐变蒙版可以与其他效果(例如填充图案)结合使用。

SVG代码:

<svg width="500" height="120">
<defs>

 <linearGradient id="gradient2"
               x1="0%"   y1="0%"
               x2="100%" y2="0%"
               spreadMethod="pad">
   <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
   <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
 </linearGradient>


 <pattern id="pattern2"
        x="10" y="10" width="20" height="20"
        patternUnits="userSpaceOnUse" >

   <circle cx="10" cy="10" r="10" style="stroke: none; fill: #FF0000; " />

 </pattern>

 <mask id="mask6" x="0" y="0" width="200" height="100" >
     <rect x="0" y="0"  width="200" height="100"
         style="stroke:none; fill: url(#gradient2)"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
     style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
 </svg>

运行效果:

注:其中可见矩形使用填充图案作为填充,并在其蒙版中使用渐变。

要显示的矩形如何引用其CSS属性中的fill填充图案,以及如何引用其CSS属性中的mask蒙版。

五、在蒙版中使用填充图案

也可以在蒙版中使用填充图案,从而使蒙版成为填充图案的形状。

例:

<svg width="500" height="120">
<defs>
 <pattern id="pattern1"
        x="10" y="10" width="20" height="20"
        patternUnits="userSpaceOnUse" >

     <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
 </pattern>

 <mask id="mask5" x="0" y="0" width="200" height="100" >
   <rect x="0" y="0"  width="200" height="100"
       style="stroke:none; fill: url(#pattern1)"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
   style="stroke: none; fill: #FF0000; mask: url(#mask5)"/>
 </svg>

运行效果

注:矩形现在是半透明的,其中填充图案绘制了圆圈,而在其他位置完全透明。

六、总结

本文基于HTML基础,介绍了SVG中蒙版的应用。定义不同形状的蒙版,设置蒙版的不透明度,蒙版中使用渐变,以及蒙版应用填充图案。都通过项目,进行详细的讲解。

希望能够帮助你更好的学习。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解SVG 渐变知识

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型:(Linear,Radial)。

一、SVG 线性渐变

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平,垂直或角渐变。

/*y1和y2相等,而x1和x2不同时,可创建水平渐变。

当x1和x2相等,而y1和y2不同时,可创建垂直渐变。

当x1和x2不同,且y1和y2不同时,可创建角形渐变。*/

实例 1

定义水平线性渐变从黄色到红色的椭圆形。

SVG代码

<!DOCTYPE html>
<html>
<body style="background-color: aqua;">
<title>项目</title>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>

运行效果:

代码解析:

  1. <linearGradient>标签的id属性可为渐变定义一个唯一的名称。
  2. <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置。
  3. 渐变的颜色范围可由两种或多种颜色组成,每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
  4. 填充属性把 ellipse 元素链接到此渐变。

实例 2

定义一个垂直线性渐变从黄色到红色的椭圆形。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

实例 3

定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#000" font-size="45" font-family="Verdana"
 x="150" y="86"> SVG</text>
</svg>

运行效果:

代码解析:

<text> 元素是用来添加一个文本。

二、SVG 放射性渐变

<radialGradient>元素用于定义放射性渐变。

<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

实例 1

定义一个放射性渐变从白色到蓝色椭圆。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
     stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

代码解析:

  1. <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称。
  2. CX,CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
  3. 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束。
  4. 填充属性把ellipse元素链接到此渐变。

实例 2

定义放射性渐变从白色到蓝色的另一个椭圆。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <radialGradient id="grad1" cx="20%" cy="30%" r="30%"
 fx="50%" fy="50%">     
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />     
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />    
</radialGradient>  
</defs> 
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

三、总结

本文基于HTML基础,介绍了图像SVG元素中的渐变效果,通过案例的分析,再实际项目中需要注意的点,对代码进行解析。开发项目中遇到的难题,都提供了一些有效的解决办法。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

代码很简单,希望能够帮助读者更好的去学习SVG。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3圆角知识

一、浏览器支持

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

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5


二、border-radius 属性

1. 创建具有背景图的圆角

CSS3中,可以使用border-radius属性,为元素指定圆角显示。

代码如下:

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>项目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圆角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.带边框的圆角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.带背景图的圆角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

提示:

border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 属性的简写。


2. 为每个角指定弧度

如果只为border-radius属性指定一个值,则此半径将应用于所有4个角。

另外可以根据自己开发的需求,分别指定每个角。以下是规则:

四个值: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。

三个值: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。

两个值: 第一个值适用于左上和右下角,和二值适用于右上和左下角。

一个值: 所有的四个角都是圆的。

实例1:

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

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

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

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

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

#rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html> 

实例2:

创建椭圆形的圆角

创建椭圆形的圆角

椭圆边框 :border-radius: 50px/15px

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

椭圆边框 : border-radius: 15px/50px

#rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

椭圆边框 : border-radius: 50%

#rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>椭圆边框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>椭圆边框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>椭圆边框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

三、总结

1、本文主要讲解了CSS3圆角,通过一些属性的演示,丰富的案例,帮助大家理解CSS知识。希望大家可以耐心的去学习,同时希望碰到问题主动搜索,尝试一下,总会有解决方法。

2、代码很简单,希望能帮到你。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS对齐方式

一、居中

1. 居中对齐元素

将块元素水平居中对齐(像 <div>) , 使用 margin: auto;

设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:

这个div是居中的。

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
一篇文章带你了解CSS对齐方式

注意:如果没有设置宽度属性,则居中对齐没有效果 (或者设置到100%).


2. 居中对齐文本

将元素内部的文本居中, 使用text-align: center;

这些文本是居中的。

.center {
    text-align: center;
    border: 3px solid green;
}
一篇文章带你了解CSS对齐方式

3. 居中图片

居中图片, 使用 margin: auto; 并且设置为块级元素:

img {
    display: block;
    margin: auto;
    width: 40%;
}
一篇文章带你了解CSS对齐方式

二、左右

HTML代码:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>

</head>
<body>

  <h2>右对齐</h2>
  <p>如何正确定位元素与位置属性的一个例子:</p>

  <div class="right">
    <p>在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议.</p>
  </div>

</body>
</html>

1. 左右对齐 – 使用 position

对齐元素的一种方法是使用 position: absolute;

在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议。

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注意:

绝对定位元素从正常流中移除,并且可以重叠元素。

当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题, 当使用 position. 如果容器元素有一个指定的宽度 (例如:<div class=”container”>) , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此,总是声明 !DOCTYPE 当使用 position时:

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

2. 左右对齐 – 使用 float

对齐元素的另一种方法是使用 float 属性:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

提示:

当将元素使用浮动对齐时,总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

效果图:

一篇文章带你了解CSS对齐方式

三、垂直居中,水平居中

HTML代码:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>

</head>
<body>

  <h2>居中</h2>
  <p>在这个实例中,
     我们使用定位和transform属性实现元素的水平和垂直居中:</p>

  <div class="center">
    <!-- <p>我是垂直居中的.</p> -->
    <p>我水平垂直居中.</p>
    
  </div>

  <p>注意: transform属性不支持IE8和更早的版本.</p>

</body>
</html>
一篇文章带你了解CSS对齐方式

1. 使用 padding

有许多方法来中心垂直CSS元素. 一个简单的解决方案是使用顶部和底部 padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

水平和垂直居中, 使用 padding 和 text-align: center:

垂直居中

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
一篇文章带你了解CSS对齐方式

2. 使用 line-height

另一个技巧是使用 line-height 属性值等于 height 属性值.

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

3. 使用 position & transform

如果padding和line-height不可选,第三种解决方案是使用定位和变换属性:

.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
一篇文章带你了解CSS对齐方式

四、总结

本文基于Html基础,主要介绍了Html中对齐的方式,对于对齐中的标签做了详细的讲解,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。

最后,希望可以帮助大家更好的学习CSS3。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐: