CSS3系列教程:阴影

2016-02-19 18:18 2 1 收藏

今天天气好晴朗处处好风光，好天气好开始，图老师又来和大家分享啦。下面给大家推荐CSS3系列教程:阴影，希望大家看完后也有个好心情，快快行动吧！

【 tulaoshi.com - Web开发】

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。

一般可以分为box-shadow和textshadow两类。

CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色

了解了这些，我们就可以以下面的方法开始体验了

浏览器兼容性：

在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。

box-shadow

12345678

#boxShadow{  border: 5px solid #111;  -webkit-box-shadow: 5px 5px 7px #999;  -webkit-border-bottom-right-radius: 15px;  padding: 15px 25px;  height: inherit;  width: 590px;}

这种效果同样可以用于图片

简单文字阴影：

text-shadow

.textShadowSingle {  font-size: 3.2em;  color: #F5F5F5;  text-shadow: 3px 3px 7px #111;  text-align: center;}

多重文字阴影

multi-text-shadow

12345678

.textShadowMultiple {  font-size: 3.2em;  color: #FFF;  text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;  text-align: center;  padding: 10px 0px 5px 0px;  background: #151515;}

来源:https://www.tulaoshi.com/n/20160219/1617229.html

上一篇：关于HTML5在移动设备上的支持情况
下一篇：防SQL注入：生成参数化的通用分页查询语句

看过《CSS3系列教程:阴影》的人还看了以下文章更多>>

CSS教程：详解CSS3 Media Queries

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。 ...

CSS教程:与众不同的CSS3技巧

标签： Web开发

你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马...

初步了解CSS3

标签： Html CSS布局 Div+CSS XHTML

最近闲来无事，上W3C转了一圈，粗略地浏览了一下尚未发布的CSS3，虽然还未被W3C正式发布出来，但还是能从已有的资料中窥出一些端倪，一个很明显的特征，CSS3制订得越来越细致了，某些细节之处完全超乎你所能想象的到的范围。在这里不提及CSS3的语法，因为对于目前尚未有软件支持的CSS3，任何语法的探讨都像是空中楼...

CSS3教程:在CSS中使用的颜色

标签： Web开发

译自：Playing Around with CSS3 Colors 中文：玩转CSS3色彩传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)。 CSS3 带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器...

CSS3教程：由CSS3代码生成的图形与图标设计

标签： Web开发

本文中的这些标志与图标都是用CSS3制作而成，看上去似乎很不可思议，其中包括了IE图标，网站图标，奥运会标志等等，都是一些十分常见的标志，而它们之所有如此特别是因为这些标志与图标只是用CSS3来显示在网页中，而并非图片显示。尽管被批评为走火入魔，CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计，如果你看到本文介绍的...

查看更多精彩>>