CSS3 box-shadow 内外阴影效果

时间：2022-09-23 10:28:06

说明

box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。

语法

box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] ]

解释

none：默认值为none，表示没有阴影
inset：可选。将边框外阴影改为边框内阴影（即使是透明边框），背景之上内容之下。如果不写，默认为边框外阴影。inset只可写在最前或者最后。
offset-x：必需。阴影水平方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素右边

CSS3 box-shadow 内外阴影效果的更多相关文章

  1. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

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

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

  3. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  4. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  5. 分享div、text、Box Shadow&lpar;阴影&rpar;演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  6. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  7. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  8. HTML5 拖放：在相册中对照片进行排序

    1. [代码]index.html     <div class="albums">    <div class="album" id=&qu ...

  9. css3 shadow为了实现各种漂亮的阴影效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

随机推荐

  1. Java中String、StringBuffer、StringBuilder区别与理解

    一.先比较String.StringBuffer.StringBuilder变量的HashCode值 使用System.out.println(obj.hashcode())输出的时对象的哈希码, 而 ...

  2. Hsqldb安装与使用

    HSQLDB是一个轻量级的纯Java开发的开放源代码的关系数据库系统,其体积小,占用空间小,使用简单,支持内存运行方式等特点.可以在http://sourceforge.net/projects/hs ...

  3. ORA-12520&colon; TNS&colon; 监听程序无法为请求的服务器类型找到可用的处理程序

    当你碰到ORA-12520错误时,如下所示: 英文:ORA-12520: TNS:listener could not find available handler for requested typ ...

  4. 着色Test

    1 2 3 4 5 6 7 8 9 10 def test:     print "just a test"     print "just a test"   ...

  5. vsftpd安装

    原文连接:史上最详细的vsftpd配置文件讲解: http://www.9170.org/post-322.html 参考博文:centos启用ftp功能:http://os.51cto.com/ar ...

  6. Docker五大优势：持续集成、版本控制、可移植性、隔离性和安全性

    随着Docker技术的不断成熟,越来越多的企业开始考虑使用Docker.Docker有很多的优势,本文主要讲述了Docker的五个最重要优势,即持续集成.版本控制.可移植性.隔离性和安全性. 对于Do ...

  7. pyqt5-是否被编辑

    setWindowModified(bool)     被编辑状态,显示*;    没有被编辑,不显示* isWindowModified()              窗口是否是被编辑状态 from ...

  8. unity 判断物体是否在视角内（巧妙！）

    public var isRendering:boolean=false; private var lastTime:float=0; private var curtTime:float=0; fu ...

  9. kali linux android木马（内网&plus;外网）

    1,内网木马 先生成一个小马 msfpayload -p android/meterpreter/reverse_tcp LHOST=192.168.8.104 LPORT=5555 R > a ...

  10. POJ 2431 （优先队列）

    题目链接:https://vjudge.net/problem/POJ-2431 思路: “ 在卡车行驶途中, 只有经过加油站才能加油.” 我们不妨转变思路, 理解成“当卡车驶过加油站时就获得了加油的 ...

相关文章