简述

网页上经常会出现一些弧形的阴影效果，看起来很漂亮，下面我们来讲述下如何用CSS来实现一个弧形阴影。

阴影

效果

首先实现一个简单的阴影效果

<!DOCTYPE html>

<html>

<head>

<style type='text/css'>

div {

  background: green;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

  border-radius: 150px/10px;

  height: 20px;

  width: 400px;

  z-index: -1;

}

</style>

</head>

<body>

  <div>

  </div>

</body>

</html>

注释

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5)

表示一个带外阴影的元素，阴影位置x轴偏移0，y轴偏移4px，模糊范围10px，阴影颜色rgba(0, 0, 0, 0.5)

border-radius: 150px/10px

表示水平方向的半径和垂直方向的半径分别为150px、10px

z-index: -1

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

拥有更低的优先级，可用于将在一个元素放置于另一元素之后。

注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！

标题

效果

源码

设置背景色、字体、位置、行高等。下边框为蓝色部分可以暂时忽略，后面我们需要进行阴影显示用的。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type='text/css'>

body {

  /* 外边距：24像素 */

  margin: 24px;

}

h1 {

  /* 背景色 */

  background: #139573;

  /* 下边框：高4像素 实线 蓝色 */

  border-bottom: 4px solid blue;

  /* 文本色：白色 */

  color: #fff;

  /* 字体风格 */

  font-family: sans-serif;

  /* 字体大小：24像素 */

  font-size: 24px;

  /* 文本粗细：正常 */

  font-weight: normal;

  /* 行高：80像素 */

  line-height: 80px;

  margin: 0;

  /* 文本位置：相对定位 */

  position: relative;

  /* 文本对齐方式：居中 */

  text-align: center;

}

h1 strong {

  font-weight: bold;

}

</style>

</head>

<body>

  <h1>

    <strong>弧形阴影</strong> - 这是一个简单的弧形阴影

  </h1>

</body>

</html>

合并

效果

源码

这里我们将阴影的背景变为透明色，然后设置位置和大小来实现我们的效果。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type='text/css'>

body {

  margin: 24px;

}

h1 {

  background: #139573;

  border-bottom: 4px solid #fff;

  color: #fff;

  font-family: sans-serif;

  font-size: 24px;

  font-weight: normal;

  line-height: 80px;

  margin: 0;

  position: relative;

  text-align: center;

}

h1 strong {

  font-weight: bold;

}

h1::before {

  background: transparent;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

  border-radius: 800px/10px;

  bottom: -2px;

  content: "";

  height: 8px;

  left: 2%;

  position: absolute;

  width: 96%;

  z-index: -1;

}

</style>

</head>

<body>

  <h1>

    <strong>弧形阴影</strong> - 这是一个简单的弧形阴影

  </h1>

</body>

</html>

CSS中存在两个伪类:before 和 :after，它们特有的属性content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。

所以，我们只需要配合position: absolute ，就可以将其当成容器，拼合成弧形阴影效果。

CSS之弧形阴影的更多相关文章

  1. css之单边阴影

    css之单边阴影 需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了 效果: 原理: 1.在左边的外阴影就是右边的内阴影 2.将box-shadow写在be ...

  2. css实现动态阴影、蚀刻文本、渐变文本

    css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...

  3. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  4. 酷炫，用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  5. CSS实现文字阴影的效果

    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...

  6. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. css生成彩色阴影

    通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图: 原理: 利用伪元素,生成一 ...

  8. CSS 页面顶部阴影和给浏览器强制加上滚动条

    /*给浏览器强制加上滚动条*/ html{height: 101%;} /*页面顶部阴影*/ body:before{ content: ""; position: fixed; ...

  9. css box-shadow添加阴影

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

随机推荐

  1. mongodb 主从服务器

    @set mongod=..\bin\mongod.exe set keyFile=key.key if not exist %keyFile% ( echo 123456>%keyFile% ...

  2. 【算法】E.W.Dijkstra算术表达式求值

    算术表达式求值 我们要学习的一个栈的用例同时也是展示泛型的应用的一个经典例子,就是用来计算算术表达式的值,例如 ( 1 + ( ( 2 + 3 ) * ( 4 * 5 ) ) ) 如果将4乘以5,把3 ...

  3. 设置VMWARE通过桥接方式使用主机无线网卡上网

    原文:http://www.cnblogs.com/liongis/p/3265458.html 环境:WIN7旗舰版,台式机,U盘无线上网卡. 虚拟软件:VMware9.0,虚拟系统:CentOS6 ...

  4. ubuntu 点点滴滴

    pptpd http://linux.cn/article-3376-1.html 命令行升级ubuntu版本 do-release-upgrade -d  寻找最新的稳定版本,加上-d参数则包括不稳 ...

  5. Sql调用WebService

    DECLARE @scid int,@rt int ) --创建MSSOAP.SoapClient组件(如果安装的是SoapToolkit30,应该是MSSOAP.SoapClient30,否则是MS ...

  6. php 如何判断一个常量是否已经定义

    php 如何判断一个常量是否已经定义 http://blog.csdn.net/raojinpg/article/details/6222882 如果看过手册的人肯定知道,可以直接忽视 不过在实际项目 ...

  7. java 以及 vs 的快捷键

    javactrl+shift+y 小写ctrl+shift+x 大写ctrl+shift+f 格式化代码 vsctrl+u 小写ctrl+shift+u 大写ctrl+k+f 格式化代码

  8. 一个轻量级的3D CSS 库

    JavaScript 3D library 该项目的目的是为了打造轻量级的.实用简单的3D CSS库. Usage使用方法 下载 minified库文件 和 css文件,并将其包含于你的HTML中,就 ...

  9. Jmeter正则表达式提取器的使用方法（转）

    下面简单介绍一下Jmeter正则表达式提取器的使用方法. 1.添加Jmeter正则表达式提取器:在具体的Request下添加Jmeter正则表达式提取器(Jmeter正则表达式在“后置处理器”下面)  ...

  10. sql主键的一点重要理解

    sql只会读取数据,不会自动设置主键,所以绑定数据后要设置主键(前台) 不管是int或者uniqueidentifier只要类型对得上就可以用,int自增其实没什么太大优势(但是通常都会用自增来做,从 ...