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. 利用NotePad++ 格式化代码(格式标准化) worldsing

    在阅读别人的代码时往往会遇到格式很乱,阅读起来很费劲,如果手动改很容易出错,而且很费时间,这时可以借助一些专业的编辑器来格式化代码,NotePad++是一个轻量级的代码编辑器,占用内存少,运行速度快, ...

  2. 使用cmd命令登录mysql数据库时报2013-Lost connection to MYSQL server at 'waiting for initial communication packet',system error:0

    [错误内容]:SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packe ...

  3. C程序设计语言(2)文摘

    第一章 导言 1.1 入门 1.2 变量与算术表达式 1.3 for语句 1.4 符号常量 1.5 字符输入输出 #include "stdafx.h" main(int argc ...

  4. CMD 与 ENTRYPOINT 的区别

    Dockerfile里有 CMD 与 ENTRYPOINT 两个功能咋看起来很相似的指令,开始的时候觉得两个互用没什么所谓,但其实并非如此: CMD指令: The main purpose of a ...

  5. PowerDesigner工具建表步骤

    以商场VIP系统中的表为例 先建立管理员用户表 1.双击打开PowerDesigner工具,点File 选择 New Model  打开如下图,选择标红部分,点击OK 2点击选择标红部位Entity ...

  6. 试题 H: 人物相关性分析 第十届蓝桥杯

    试题 H: 人物相关性分析时间限制: 1.0s 内存限制: 512.0MB 本题总分: 20 分[问题描述]小明正在分析一本小说中的人物相关性.他想知道在小说中 Alice 和 Bob有多少次同时出现 ...

  7. Oracle EBS Request Status: Pending

    如果提交请求以后,状态一直是pending状态,可以在"工具"打开"Manager",查看一下Maximum是否有设置错,另外pending的数量当前是多少. ...

  8. Android-Sqlite3的使用

    Sqlite3的使用: adb remount --> 挂载上 adb devices -->查看设备 adb shell -->进入Android文件系统 cd /data/dat ...

  9. 注册一个GitHub用户的过程

    今天,我注册了一个GitHub用户.一开始,不知道GitHub是什么,还以为叫什么"getup",心里还想着什么网站名字这么奇怪,后来在舍友的帮助之下知道了原来是叫GitHub.下 ...

  10. [Erlang35]Erlang18的time

    在Erlang 18中, 我们还是可以使用erlang:now/0 但也已经 deprecated啦,大量使用可能引发瓶颈. The default time warp mode has the sa ...