CSS3 box-shadow盒子阴影
inset | offset-x | offset-y | blur-radius | spread-radius | color
阴影在边框内 x轴 y轴 模糊半径 扩散半径 阴影颜色
inset: 默认阴影在边框外。使用 inset 后,阴影在边框内
offset-x:水平偏移量:(如果是负值则阴影位于元素左边)
offset-y:垂直偏移量:(如果是负值则阴影位于元素上面)
offset-x和offset-y 两者都是0,那么阴影位于元素后面
blur-radius:值越大,模糊面积越大,阴影就越大越淡。 不能为负值(默认为0,此时阴影边缘锐利。)
spread-radius: 取正值时,阴影扩大;取负值时,阴影收缩(默认为0,此时阴影与元素同样大。)
/* x轴 y轴 阴影颜色*/
box-shadow: 6px -5px #ccc;
/* x轴 y轴 模糊半径 阴影颜色*/
box-shadow: 6px -5px 5px red;
/* x轴 y轴 模糊半径 扩散半径 阴影颜色*/
box-shadow: 1px 1px -5px 2px red;
/* inset: 阴影在边框内 */
box-shadow: inset -10px 1px 3px red;
CSS3 box-shadow盒子阴影的更多相关文章
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
随机推荐
- 关于MFC程序关闭之后仍有线程存留
最近弄了一个项目,关闭之后在任务管理器中依然存留,刚开始以为是因为子线程没能退出,就用ExitThread来终止,终止之后发现好像并不是子线程的原因 查了好久没能找到原因 最后只能通杀 HANDLE ...
- linux中进程和线程简单介绍
进程和线程的简单知识 进程是用来申请内核资源的,只有资源到位,进程才会进行,进程包含线程,线程是进程内部的调度单位,所以在业内有这样一句话,进程是资源分配最基本单位,线程是系统调度的最基本的单位,进程 ...
- element+Vue el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面
vue的写法就是el-form上添加阻止默认事件 @submit.native.prevent <el-form ref="queryForm" label-width=&q ...
- ubuntu 22.04 网络配置ib网卡配置
第一步:查看Ubuntu版本与内核版本 cat /etc/issue 这说明系统的版本为:Ubuntu 20.04.4 LTS \n \l uname -a Linux gacs-gm-11 5.4. ...
- reids 启动方法
---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入"cmd",回车 二,然后会进入cmd ...
- 谷歌浏览器console.log打印失效问题
什么都没干,谷歌浏览器console.log就失效了,百度说如下图就能打印了,该勾选的勾选了,就是打印无效 后来发现是眼睛边上的那个输入框将打印的内容给过滤掉了,将输入框中的内容删掉就好了 Filte ...
- Kotlin初学习
Java和Kotlin数据类型对照表
- rocketmq-exporter部署(干货)
简单介绍 rocketmq_exporter是prometheus提供的用于监控rocketmq运行状态的exporter 环境 系统 版本 CentOS 7.6.1810 (Core) CPU/内存 ...
- java实现读取json文件指定字段值
使用场景 现有一个大数据的json文件,每条数据有多层数据信息.现在想把其中某个字段提取并叠加计算. json文件格式 1 { 2 "MsgID":"111", ...
- 12组-Alpha冲刺-5/6
一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15562095.html 小组人数:10人 二.冲刺概况汇报 侯钦凯 过去两天完成 ...