box-shadow介绍

css3可以使用 box-shadow 属性轻松地为元素添加阴影效果,box-shadow可以设定多组效果,每组参数值以逗号分隔.

语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

参数说明:

  • x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。
  • y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。
  • blur:用于设置边框阴影半径大小。
  • spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。
  • color:设置阴影的颜色;
  • inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

彩色阴影:

box-shadow:0px 0px 10px red,2px 2px 10px 10px yellow,4px 4px 12px 12px green;

C#-WebForm-css box-shadow 给边框添加阴影效果的更多相关文章

  1. 【uniapp 开发】如何给边框添加阴影效果

    css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2. 这是头两 ...

  2. swift UIButton边框添加阴影效果

    btn.layer.shadowOpacity = 0.8 //阴影区域透明度 btn.layer.shadowColor = UIColor.black.cgColor // 阴影区域颜色 btn. ...

  3. CSS Box Model(盒子模型)

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  4. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  5. css盒子模型之边框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  7. CSS 关于文本 背景 边框整理

    文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...

  8. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  9. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

随机推荐

  1. 7-n!的位数(斯特灵公式)

    http://acm.hdu.edu.cn/showproblem.php?pid=1018 Big NumberTime Limit: 2000/1000 MS (Java/Others) Memo ...

  2. Java文件下载详解

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException ...

  3. Vue 路由缓存

    问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了 解决方案   vue 2.0     之中  有k ...

  4. Golang之面向对象和指针

    武大郎,来十个烧饼... package main import "fmt" type Integer int //为内置的int类型增加了新方法less,面向对象写法 func ...

  5. golang之math/rand随机数

    简单的随机数生成,结合时间模块初始化种子 package main import ( "fmt" "math/rand" "time" ) ...

  6. 1.oracle dblink(数据库不同实例数据对导)

    .创建一个两个数据库之间的dblink,语法如下 create database link to_test connect to scott identified by tiger using '(D ...

  7. 20155230 2016-2017-2 《Java程序设计》第七周学习总结

    20155230 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 世界时:在1972年引入UTC之前,GMT与UT是相同的 格林威治标准时间(GMT),现已不 ...

  8. myeclispe2014启动后报错 Subclipse talks to Subversion via a Java API that requires access to native libraries.

    解决方案: Window -> Preferences -> Team -> SVN, 将SVN接口的Client修改为如图所示

  9. ZOJ2388 Beat the Spread! 2017-04-16 19:18 91人阅读 评论(0) 收藏

    Beat the Spread! Time Limit: 2 Seconds      Memory Limit: 65536 KB Superbowl Sunday is nearly here. ...

  10. B-spline Curves 学习之B样条曲线的移动控制点、修改节点分析(7)

    B-spline Curves: Moving Control Points 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习 ...