盒子阴影CSS3（自学笔记）

最新推荐文章于 2023-12-11 11:51:36 发布

Mr.Zmh

最新推荐文章于 2023-12-11 11:51:36 发布

阅读量144

点赞数

分类专栏：自学笔记文章标签： css3

本文链接：https://blog.csdn.net/zmhxuexi/article/details/107720530

版权

自学笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

语法：box-shadow:水平阴影，垂直阴影，模糊距离（虚实），阴影尺寸（影子大小），阴影颜色，内/外阴影
值是像素值
水平阴影：正值向右，负值向左
垂直阴影：正值向下，负值向上

补充：text-shadow为文字阴影

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr.Zmh

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css3阴影属性

Emma946的博客

03-16

3472

CSS3阴影 CSS3 是 CSS 技术的升级版本，CSS3 语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。 CSS3的优点： CSS3 将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也...

自学web前端笔记小结---CSS3

qq_41801762的博客

09-15

716

CSS3笔记 CSS3选择器规范地址：问题： 1.CSS:cascading style sheets（层叠样式表）面试常问 2.样式表及组成关系：由一条条规则（选择器+声明块）组成笔试常考声明：CSS属性+CSS属性值组成的键值对 3.浏览器读取编译CSS的顺序：从右往左 eg.div ul li .test{ } 为什么？有机会一次选中目标元素（算法复杂度低） 4...

参与评论您还未登录，请先登录后发表或查看评论

【青山css】css3阴影效果属性详解及创意玩法

qq_28252421的博客

02-26

2万+

前言 css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。属性介绍语法 box-shadow: x-shadow y-shadow blur spread color inset; x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现 box-shadow: x-

CSS3阴影

m0_73782968的博客

02-26

386

contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白但是背景图可能在区域范围内铺不满（宽高给大点）正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。/* contain:包含，等比例缩放背景图片到完整显示在盒子中，但是背景图可能在区域范围内铺不满（宽高给大点） */background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);

CSS3 内阴影的应用

最爱喝怡宝的博客

11-30

636

内阴影应用效果展示：运用到的具体属性： box-shadow：0px 1px 0px rgb（255 255 255/10%）,inset 0px 1px 1px rgb（0 0 0/70%）值说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。 inset 可选。从外层的阴...

CSS3 设置盒子三边内阴影、双边内阴影、单边内阴影

hello，是翠花呀

04-25

3万+

对之前的博文进行完善。相信对于CSS3 中box-shadow 属性大家都不陌生，但是很多新手看到参考手册估计一时半会还摸不着头脑吧，值是知道设置了，但是怎样达到自己想要的效果呢？今天我跟大家分享关于box-shadow 相对于盒子边设置阴影的问题。（1）（上左右内置阴影）。为了美观，加上了border -radius 属性。阴影设置代码： box-shadow: 0

自己学习html+css的详细笔记

qq_53366282的博客

05-18

1820

目录常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13

css自学笔记

ghz343的博客

08-18

351

css自学笔记 1、css简介 css叫叠层样式表，是标记语言主要的使用场景美化网页，布局页面的。它的主要作用是设置html页面中文本的内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面布局和外观显示样式。总结： 1、html主要做结构的，显示元素内容。 2、css美化html，布局网页。 3、css最大价值：由html专注去做结构呈现。样式交给css，即结构html，样式css相分离。 2、css语法规范 css规则由两个部分构成：选择器及一条或者多条声明。如：h1{col

HTML&CSS&JavaScript个人入门自学笔记

PriceCheap的博客

04-18

277

herf=“URL”中，URL末尾不加斜杠时，会向服务器发出两次请求。这是因为URL末尾不加斜杠时，所在文件夹找不到相应的资源。所以服务器会自动填加斜杆向下一级寻找。 img中src属性存在两种引用，跟C一样的嘛： 1.绝对路径引用：直接复制img的地址粘贴，可移植性差 2.相对路径引用: ①img跟html存在同一文件夹下，直接引用 <img src=“photo.jpg” /> ②img文件夹跟html存在于同一文件夹下 <img src=”./img/photo.j...

自学Css3第一天笔记

weshouldhelp的博客

08-23

239

选择器：.box：类名选择器， #box：ID选择器，div p：后代选择器， div.box：交集选择器； div,p,span：并集选择器， div>p ：子代选择器； *:通配符，div+p：选中div后面的第一个P，div~p：选中div后面所有的P 伪类选择器：:hover鼠标经过， :link正常状态， :action点击， :...

CSS3盒子边框阴影，内阴影外阴影

海贼王某人的博客

12-29

2643

CSS3盒子边框阴影，内阴影外阴影 // X：横向阴影（偏移值） // Y：纵向阴影（偏移值） // Z：扩散面积 // #FF00FF：阴影颜色 box-shadow: X Y Z #FF00FF;

CSS3阴影实现方法及技巧全解

陌然的博客

06-04

1133

CSS3阴影实现方法及技巧全解网页设计中常常要用到阴影的效果，通过阴影可以比较容易突出一个元素，在没有CSS3的时候，一般都用图片做阴影效果，而现在通过使用CSS3的text-shado...

如何给盒子添加阴影效果【CSS技术】

最新发布

zy1992As的博客

12-11

929

当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改width属性值，才能保证盒子总宽度不变。列举了box-shadow属性参数值，其中h-shadow和v-shadow为必选参数值不可以省略，其余为可选参数值。content-box:浏览器对盒子模型的解释遵从W3C标准，当定义width和height时它的参数值不包括border和padding。上述语法格式中，box-sizing属性的取值可以为content-box或border-box，关于这两个值的相关介绍如下。

CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

油墨香^-^的博客

06-22

4万+

CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法 CSS 代码: /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | bl

CSS系列之盒子阴影box-shadow（CSS3）

老__L的博客

01-30

2万+

本文主要介绍CSS的box-shadow属性。盒子阴影box-shadow（CSS3）

分享CSS3里box-shadow属性的使用方法，包括内阴影box-shadow：inset

ly000666的博客

10-08

1万+

一、box-shadow语法 box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，越模糊） spread-radius（阴影扩展半径，可正可负） color 属性值描述: 1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影 2.X-of

css3 box-shadow阴影(外阴影与外发光)讲解

weixin_30411239的博客

10-20

1819

基础说明：外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影内阴影：inset 可以设置成内...

CSS3阴影 box-shadow的使用和技巧总结