开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

底部没有显示CSS框阴影

底部没有显示CSS框阴影可能是由于以下原因：

CSS样式未正确应用：请检查CSS选择器是否正确匹配了需要添加阴影的元素，以及阴影属性是否正确设置。
阴影属性未正确设置：请检查使用的阴影属性是否正确，例如：box-shadow: 水平偏移垂直偏移模糊距离阴影颜色。
元素高度问题：如果元素高度不足以显示阴影，可以尝试增加元素高度。
元素定位问题：如果元素使用了相对定位或绝对定位，可能会导致阴影显示位置不正确，可以尝试更改元素定位方式。
浏览器兼容性问题：部分浏览器可能不支持某些CSS属性，请检查阴影属性是否兼容目标浏览器。

以下是一个简单的示例，可以在HTML文档中使用：

<!DOCTYPE html>
<html>
<head><style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

这个示例中，一个带有阴影的红色盒子将会显示在页面上。如果仍然无法解决问题，请提供更多详细信息以便进一步分析。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Box-shadow的应用技巧分享

查看文档发现：spread-radius，设置对象的阴影外延值。可以为负值，模糊值设置，让盒子扩展了20px , 可以将外延值，设置为负，让水平方向阴影取消

02

寒假提升｜ Day6 CSS 第四部分

当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div)都会默认继承这些属性

02

CSS第五天-定位

CSS第五天-定位静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用根据自身原来的位置，进行定位没有脱标，在页面还占有位置天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位子绝父相脱离标准流，在页面不占有位置绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度 ---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动可以

04

CVPR2020 | 将影子和它对应的物体实例一起分割，还附带光源方向预测

论文地址：https://arxiv.org/pdf/1911.07034.pdf

06

Typecho主题Handsome修改记录---（持续更新）

usr/themes/handsome/component/footer.php删代码至如图所示

02

【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。

04

常用的CSS属性大全

1. 动画属性属性描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3 animation 复合属性。检索或设置对象所应用的动画特效。 3 animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3 animation-duration 检索或设置对象动画的持续时间 3 animation-timing-func

03

哪些你知道或不知道的css，在这里或许都齐全 css编码技巧 css小技巧

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

01

CSS3边框

1、border-radius 圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 border-radius: 5px; 对于正方形border-radius设置为边长的一半，就变成圆了。 width: 100px; height: 100px; border-radius: 50px; border-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，

05

哪些你知道或不知道的css，在这里或许都齐全

暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：

02

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

03

移动端样式问题汇总

-webkit-tap-highlight-color：rgba（0，0，0，0）;

02

css基础教程之边框背景

1.border：<line-width> || <line-style> || <color>

02

Box-Shadow Loading，可以创造无限可能

Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，"多层阴影"，制作一些非常有趣的动画。

01

收藏 | 移动端H5开发常用技巧总结

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

02

ECharts 提示框组件Tooltip属性大全（包含文本注释）

附图：提示框浮层内容格式器 formatter: '{b0}: {c0}
{b1}: {c1}' 格式化

01

Day9:html和css

标题图 Day9:html和css <head> <meta charset="UTF-8"> <title></title> <meta name="description" content="" /> <meta name="Keywords" content="" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <li

03

如何在 CSS 中设计出漂亮的阴影？

然而，当我环顾网络时，很明显，大多数阴影并不像它们所希望的那样丰富，网络上覆盖着模糊的灰色盒子，看起来并不像影子。

01

css学习笔记，持续记录。

1. 通配符选择器： *{...}; 选择所有元素； 2. HTML标签选择器：p{...} 、#p{...}、.p{...}; 选择指定的所有标签，指定id，指定类的所有标签； 3. 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。选择所有具有 class="center" 的

元素：p.center；

06

面试题整理｜45个CSS面试题

CSS已成为Web设计不可或缺的一部分，它让web页面变得更加美观，更具设计感。在前端面试中，CSS面试题也占有一定比重。本篇文章，将为大家分享45个和CSS相关的面试题及其解析，难度分为：初级、中级、高级三个部分，由易到难，循序渐进。

03

【分享干货】做网页设计的常用css代码大全

color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/

01

移动web端常见bug

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

03

最佳设计规范20例

免费使用摹客设计系统作为UI设计师，整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作的阶段还是和程序员沟通推动产品开发阶段，你的设计规范是否完善，对产品的质量起着决定性的关键作用。

03

河南计算机职称考试模块选择,2016职称计算机考试模块Dreamweaver选择冲刺题1

B.在Dreamweaver MX中可以使用代码监视器(Code Inspector)查看的页面的源代码

02

使用 CSS 的仿 GitHub 登录页面

在线演示地址：https://haiyong.site/demo/github.html 码上掘金地址：https://code.juejin.cn/pen/7130522560411729934

02

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;

03

寒假提升｜ Day7 CSS 第五部分

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

01

H5C3第一节

CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状 PC端浏览器支持程度差，需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛关于私有前缀：在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性目前

01

CSS使用技巧

http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html

02

【说站】css中删除input输入框的阴影

3、去除input阴影实例，直接在input css 里写 -webkit-appearance: none; 就行了

02

每个前端开发需要了解的15个强大的CSS属性

这篇文章介绍了15个重要的CSS属性，旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法，并提供了相应的示例代码。通过这篇文章，读者可以了解到一些有趣且实用的CSS属性。

02

15 个必须知道的 chrome 开发工具技巧

在Web开发者中，Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能，使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能，如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个有助于改进你的开发流程的技巧。

01

前端(二)-CSS

border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

02

HTML-CSS基础学习

HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

03

移动端bug汇总（一）

1.点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

02

使用chrome调试CSS

chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它，这里总结了一些常用的CSS调试操作。

02

作为前端程序员：你必须知道的常用英语词汇！！全是干货！！！

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 add 加 append 添加 after 之后 B back 超过范围的三次方缓动 bounce 指数衰减的反弹缓动 before 在…之前 blur 当输入框失焦的时候触发 BOM 全称 Browser Object Model 浏览器对象模型 blur 失焦 bind 绑定 background 背景 border 边框 banner 页面上的

04

CSS3 圆角边框阴影浮动详解

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length;

02

Web前端三剑客学习笔记

一直没有系统的学习HTML,CSS,JS都是东学一点，西学一点，想着暑假得空，便系统的学习下吧，故于此记录之。

06

CSS简笔画logo系列：纯CSS绘制“Adidas” Logo

看图很简单咯，Adidas Logo就是用3个“梭形”组成，然后添加3条和底色一样颜色的线覆盖在上面即可。

02

CSS-03

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

03

底部悬浮框上拉和下拉功能

实现一个通过触摸拖动操作来展开和收起底部悬浮框，并根据拖动过程中的位置和状态来调整底部容器的高度和展开状态的功能

04

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案，第一篇，后面还会有持续的文章更新整理。

04

前端成神之路-学成在线

欲先善其事，必先利其器。先把我们的前期准备工作做好，我们本次采取结构与样式相分离思想。

03

分享14 个非常实用的CSS技巧

英文 | https://ishratumar.medium.com/14-awesome-css-properties-you-need-to-know-9cee5b364990

05

利用这个css属性，你也能轻松实现一个新手引导库

相信大家或多或少都在各种网站上使用过新手引导，当网站提供的功能有点复杂时，这是一个对新手非常友好的功能，可以跟随新手引导一步一步了解网站的各种功能，我们要做的只是点击下一步或者上一步，网站就能滚动到指定位置，然后高亮页面的一部分，并且配以一些图文介绍。

03

移动端bug汇总（一）

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

你知道吗，Flutter内置了10多种show

builder通常返回Dialog组件，比如SimpleDialog和AlertDialog。

01

TDesign 更新周报（2022年4月第1周）

详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.40.1

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭