精通CSS:山顶角与阴影

3.2.2 山顶角

山顶角（mountaintop corner）是一个简单但非常灵活的概念，是由www.simplebits.com的Dan Cederholm首创的，他是畅销图书Web Standards Solutions（friends of ED，2004）的作者。假设希望创建一系列具有不同颜色的圆角框。如果使用前面的方法，就必须为每种颜色方案创建不同的角图像。如果只有几个方案，那么这个方法也可以，但是，如果想让用户创建自己的颜色方案，那么该怎么办？可能必须在服务器上动态地创建角图像，这是非常复杂的。

幸运的是，有另一个办法。并不创建有颜色的角图像，而是创建曲线形的位图角蒙板（见图3-10）。蒙板区域盖住背景颜色，而角区域实际上是透明的。当放在有颜色的框上时，它们形成曲线形框的效果（见图3-11）。

图3-10 位图角蒙板。白色的蒙板将覆盖背景颜色，产生简单的曲线效果

图3-11 山顶角框

因为这些角蒙板是位图，所以对于小曲线效果最好。如果使用大曲线，那么它会出现锯齿，不好看。

基本的标记与前一个方法相似，它需要四个元素来应用四个角蒙板：

<div class="box">
      <div class="box-outer">
      <div class="box-inner">
      <h2>headline</h2>
      <p>content</p>
      </div>
      </div>
    </div>

CSS也非常相似：
    .box {
      width: 20em;
      background: #effce7 url(images/bottom-left.gif)
      no-repeat left bottom;
     }

除了使用不同的图像之外，主要的差异是在主框div上添加了背景颜色。如果要修改框的颜色，只需修改CSS中的颜色值，不必重新创建任何新图像。这个方法只适合创建非常简单的框；但是它提供了很大的灵活性，而且可以在不同的项目中重复使用。

3.3 阴影

阴影是一种很流行、很有吸引力的设计特性，它给平淡的设计增加了深度，形成立体感。大多数人使用Photoshop这样的图形软件直接给图像添加阴影。但是，可以使用CSS产生简单的阴影效果，而不需要修改底层的图像。

这么做有几个原因。例如，你可能让非技术人员管理站点，而他不会使用Photoshop，或者要从无法使用Photoshop的地方（比如网吧）上载图像。通过使用预定义的阴影样式，只需上载常规图像，它在站点上就会带着阴影显示。

使用CSS的最大好处之一是灵活性。如果以后想去掉阴影效果，那么只需要在CSS文件中修改几行代码，而不必重新处理所有图像。

精通CSS:山顶角与阴影相关推荐

CSS捡屎记 // Web开发之精通CSS
本文目录圆角盒子滑动门山顶角多重背景图片圆角边框下拉阴影盒阴影图片替换明日份牛粪本文首发于图灵教育微信本文作者:李松峰农谚:"种地不上粪,等于瞎胡混." 跟 ...
精通CSS：高级Web标准解决方案（中文电子书下载）
诶呀!~好不容易在网上找到了中文电子版的,但是已图片形式显示出来的文件又太大,整了半天都没整理出来,控件还不够了,这里上传了后面几章的内容下面给出目录,需要的朋友可以下载,博客园的个人空间也太小了 ...
精通django 3 web开发电子版_CSS捡屎记 // Web开发之精通CSS
本文首发于图灵教育微信本文作者:李松峰农谚:"种地不上粪,等于瞎胡混." 跟许许多多大城市里的上班族一样,我也是在农村长大的.因此,毋庸讳言,我小时候拾过粪.毕竟,那时候在农村长 ...
《精通CSS》第4章网页排版
<精通 CSS>往期陪读章节: 第 1 章基础知识第 2 章添加样式第 3 章可见格式化模型或许大家会觉得排版都是设计师的工作,前端开发按照已经排版好的设计稿复原就行.当然,这 ...
精通CSS高级WEB标准解决方案（第三版）笔记
精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...
纯CSS实现漂亮圆角阴影边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
精通CSS高级Web标准解决方案（第2版）学习笔记
精通CSS 高级Web标准解决方案(第2版) 第一章基础知识一.设计代码格式 1.如果元素有恰当的含义,就应该尽量使用他们. h1,h2 ul,ol和dl strong和em abbr,acron ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
精通CSS与HTML设计模式第一章（轻松搞定CSS）
精通CSS与HTML设计模式第一章(轻松搞定CSS) 精通CSS与HTML设计模式第二章(HTML设计模式) 精通CSS与HTML设计模式第三章(CSS选择符与继承) 精通CSS与HTML设计模 ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...

精通CSS:山顶角与阴影

精通CSS:山顶角与阴影相关推荐

最新文章

热门文章