CSS3之------box-shadow属性使用方法（1），即单边阴影效果设置

最新推荐文章于 2024-06-21 11:27:52 发布
最新推荐文章于 2024-06-21 11:27:52 发布
阅读量718 收藏
点赞数
原文链接：http://www.cnblogs.com/ysdemo/p/9812873.html
版权

3.5.2　box-shadow属性使用方法（1）

@原文url：http://book.51cto.com/art/201407/444460.htm

和PSD软件制作图片相比，box-shadow修改元素的阴影效果要方便得多，因为box-shadow可以修改六个参数，得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1．单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的，例如：

  1. > 
  2. <html lang="en-US"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>box-shadow设置单边阴影效果title> 
  6.   <style type="text/css"> 
  7.     .box-shadow {  
  8.       width: 200px;  
  9.       height: 100px;  
  10.       border-radius: 5px;  
  11.       border: 1px solid #ccc;  
  12.       margin: 20px;  
  13.     }  
  14.     .top {  
  15.       box-shadow: 0 -2px 0 red;  
  16.     }  
  17.     .right {  
  18.       box-shadow: 2px 0 0 green;  
  19.     }  
  20.     .bottom {  
  21.       box-shadow: 0 2px 0 blue;  
  22.     }  
  23.     .left {  
  24.       box-shadow: -2px 0 0 orange;  
  25.     }  
  26.   style> 
  27. head> 
  28. <body> 
  29.   <div class="box-shadow top">div> 
  30.   <div class="box-shadow right">div> 
  31.   <div class="box-shadow bottom">div> 
  32.   <div class="box-shadow left">div> 
  33. body> 
  34. html> 

效果如图3-38所示。

这个案例中，使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量 来实现，其中x-offset为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset为正值时，生成底部阴影，反之为负值时生成顶部阴 影。此例中是一个单边实影投影效果（阴影模糊半径为0），但是如果阴影的模糊半径不是0，上面的方法还能不能实现单边阴影效果呢？不急着来回答，在上面的 实例中添加一个模糊半径，例如：

  1. .top {  
  2.       box-shadow: 0 -2px 5px red;  
  3.     }  
  4.     .right {  
  5.       box-shadow: 2px 0 5px green;  
  6.     }  
  7.     .bottom {  
  8.       box-shadow: 0 2px 5px blue;  
  9.     }  
  10.     .left {  
  11.       box-shadow: -2px 0 5px orange;  
  12.     } 

图3-39说明，这个效果并不是理想的单边阴影效果，当box-shadow添加了5px阴影模糊半径后，阴影不再是实影投影，阴影清晰度向外扩散，更具阴影的效果。但造成了另一个问题，给元素其他三个边加上淡淡的阴影效果，可这并不是设计需要的效果。

那究竟要怎么做呢？此时，box-shadow属性中的阴影扩展半径（spread-radius）会是一个很关键的属性，要实现单边阴影效果，必须配上这个属性（除单边实影之外）。

  1. .top {  
  2.       box-shadow: 0 -4px 5px -3px red;  
  3.     }  
  4.     .right {  
  5.       box-shadow: 4px 0 5px -3px green;  
  6.     }  
  7.     .bottom {  
  8.       box-shadow: 0 4px 5px -3px blue;  
  9.     }  
  10.     .left {  
  11.       box-shadow: -4px 0 5px -3px orange;  
  12.     } 

上面的代码调整了阴影的位移量，新增了box-shadow的扩展半径，

转载于:https://www.cnblogs.com/ysdemo/p/9812873.html

weixin_33953384
关注
CSS的box-shadow创建边框
weixin_45221036的博客
06-28 1090
CSS的box-shadow创建边框 最常见的用法： box-shadow : x轴偏移 y轴偏移 颜色 如果提供第三个和第四个可选值 box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 内阴影：inset（可选值） 因为box-shadow本来用于展现阴影，因此可以有外阴影和内阴影 box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 inset 栗子一： 下面这个输入框非常常见： <form action=""> <inpu
CSS 渐变-阴影-滤镜【值得收藏】
张浔CSDN
10-29 3457
文章目录（PS：觉得不错请点赞收藏支持一下）CSS 渐变一、初识 CSS 渐变二、CSS 线性渐变2.1 介绍线性渐变2.2 线性渐变应用2.2.1 线性渐变 - 从上到下（默认）2.2.2 线性渐变 - 从左到右2.2.3 线性渐变 - 对角线2.2.4 线性渐变 - 设置角度2.2.5 线性渐变 - 使用多个色标2.2.6 线性渐变 - 重复线性渐变三、CSS 径向渐变3.1 介绍径向渐变3.2 径向渐变应用3.2.1 径向渐变-均匀间隔的色标（默认）3.2.2 径向渐变-不同间距的色标3.2.3 径向
box-shadow 设置单边、多边阴影
weixin_45821809的博客
02-23 2872
box-shadow 设置单边、多边阴影
box-shadow:单边阴影与多边阴影
weixin_56025182的博客
08-04 8321
默认阴影尺寸为0px，可为负数（阴影块默认与盒子同大小，阴影块大小=盒子大小+阴影尺寸），例：阴影尺寸为2px，则四边同时+2px。水平向右移动10px,垂直向下移动10px,显示右边与下边阴影。水平向左移动10px,垂直向上移动10px,显示左边与上边阴影。水平向右移动10px,垂直向下移动10px,显示左边与上边阴影。水平向左移动10px,垂直向上移动10px,显示右边与下边阴影。垂直方向向下移动10px，只显示下边阴影。垂直方向向下移动10px，只显示上边阴影。外部阴影只会在外侧，被遮挡部分不显示；.
CSS 添加阴影（附代码案列讲解）
最新发布
(黎子)人生编码
06-21 2327
CSS 阴影为网页元素添加了一种视觉效果，它可以增强页面的美感和层次感。通过简单的属性，我们可以为元素添加各种阴影效果，让设计更加生动。
【CSS】单边阴影、双边阴影、三边阴影
流萤梦的博客
04-09 3914
实现阴影，先来了解一下box-shadow这个属性。box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。好了，准备工作都做好了，那就直接进入主题吧。
css3 box-shadow 给某个边快速设置阴影
寂寥人生
04-30 1335
积累一些小代码片段，需要用的时候复制粘贴简单省事 给想要设置的元素添加这个类就会有阴影效果了 .top { box-shadow: 0 -4px 5px -3px red; } .right { box-shadow: 4px 0 5px -3px green; } .bottom { bo...
css添加边框阴影上、下、左、右详解
热门推荐
小傲哥哥的博客
03-09 4万+
box-shadow: 2px 2px 2px #E5E5E5, -1px -1px 1px #E5E5E5; // 给多个边框添加阴影效果
css阴影box-shadow上下左右阴影
为人民服务
06-13 7450
css添加阴影
Css3新特性应用之视觉效果实例
12-13
本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下： 一、单侧阴影 1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset...
CSS3盒阴影box-shadow
macanfa的博客
06-12 4750
本文介绍了CSS3中的盒子阴影box-shadow，包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等！以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果！
box-shadow 单边阴影
08-23
box-shadow属性可以用来为元素添加阴影效果。如果想要实现单边阴影效果，可以通过设置不同的水平阴影和垂直阴影值来实现。水平阴影的正值表示向右移动，负值表示向左移动；垂直阴影的正值表示向下移动，负值表示向上...
CSS阴影的那些事儿
读心悦
03-14 1039
CSS中的阴影设置，可以让页面增加立体感。 一般情况下会有三种阴影： 元素盒子产生阴影：box-shadow 渲染文字后产生阴影：text-shadow 滤镜下的阴影：filter: drop-shaodw() box-shadow /* x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black; /* x偏移量 | y偏移量
DIV CSS3 box-shadow对象盒子阴影和图片阴影
cxxbzy的博客
10-22 727
box-shadow 属性用于向盒子添加一个或多个阴影效果。 offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。 offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。 blur：阴影模糊度，不能取负数。 spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 inset：表示添加内阴影，默认为外阴影。 ...
css实现单侧阴影
qq_41910413的博客
05-07 1542
box-shadow实现单侧阴影效果： .top { box-shadow: 0px -10px 10px -10px rgba(18, 21, 38, 0.3); } .right { box-shadow: 10px 0 10px -10px rgba(18, 21, 38, 0.3); } .bottom { box-shadow: 0 10px 10px -10px rgba(18, 21, 38, 0.3); } .left { box-shadow: -10px 0 1
HTML初学入门基础1----------各种标签
涟涟的博客
12-08 715
一、使用工具 1.谷歌浏览器（其他浏览器也可） 2.取色器（Instant Eyedropper） 3.VSCode 二、新建项目 Ctrl+S保存 保存类型选为HTML类型 在开始页面打出英文! 按回车键 接下来我们就在body标签内写代码了 写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果 注： ...
box-shadow用法详解(给div加上投影)
雾林小妖的博客
11-10 2189
box-shadown使用详解
html span box shadow,box-shadow用法
weixin_34697150的博客
06-22 607
一. box-shadow的定义和语法当我们需要设置多个阴影时，中间需要将每个阴影用逗号隔开。/*html代码*//*对应的css代码*/.test{width: 100px;height: 100px;background: yellow;margin: 100px auto;border-radius: 50%;box-shadow: 10px 10px 20px 10px rgba(255,...
CSS3 box-shadow属性详解：打造专业边框阴影效果
CSS3的box-shadow属性是用于为元素添加立体感和深度的视觉效果的重要工具，它允许开发者创建复杂的边框阴影效果。这个属性在现代浏览器如IE9+, Firefox 4, Chrome, Opera, 和 Safari 5.1.1及以上版本中得到了广泛...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值