零基础建站培训介绍

当前位置:

CSS3 text-shadow 属性使用方法详解

CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。(相关教程:CSS3视频教程

1.右下角阴影,左下角阴影,左上角阴影,右上角阴影


<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>text-shadow</title>    
<style>        
p{ text-align:center;  margin:0;  font-family: helvetica,arial,sans-serif; color:#999;font-size:80px; font-weight:bold;text-shadow:10px 10px #333}    </style>
</head>
<body>    
<p>Text Shadow</p>
</body>
</html>

文字效果为:

HTML文本阴影text-shadow属性特效

如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影
将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影
将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影

2. 使用text-shadow设置立体文字效果


<!DOCTYPE html> 
<html lang="en"
<head>     
<meta charset="UTF-8">     
<title>text-shadow
</title>     
<style> p{text-align:center;margin:0;font-family: helvetica,arial,sans-serif;color:#999;font-size:80px;font-weight:bold;text-shadow:-1px -1px #fff,                                    1px 1px #333;}</style
</head
<body>     
<p>Text Shadow</p
</body
</html>

以上这篇CSS3文本阴影text-shadow属性详解就是分享给大家的全部内容了,希望能给大家一个参考。

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向,竖直
  • 什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • 网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题。首先让我们来了解一下<ifr
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\padding
  • 在学做网站论坛的电影网站制作教程中,使用苹果CMS,海洋CMS,马克CMS等,有的程序没有开发程序对接,或者有开发对接的,站长不会对接。今天给大家一
  • html超文本标记语言 head 头部font 字体 字形i(italic) 倾斜,斜体字big 大的,字体加大hr 水平线Pre(predefined)预定义h5
  • ol列表是表示一个有顺序的列表形式。ol列表的编号默认情况下是从1开始的,在HTML5中可以给ol列表的编号指定起始位置,还可以进行反向编号。1、加入了
  • 在网页制作过程中,表格是一个网页不可或缺的元素之一,在HTML入门教程中,我们介绍了HTML中使用<table> 标签来制作表格。下面学做网站就以实现
  • iframe是一种嵌入框架,通过iframe可以将一个网页嵌入到另一个网页中。代码如下:<iframe name="leftframe" marginwidth=1 marginheigh
  • html锚点定位四种方法 (15472 次学习)
    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:<!DOCTYPE html><html><head><style