盒子div的阴影效果

最新推荐文章于 2024-03-23 23:56:18 发布
最新推荐文章于 2024-03-23 23:56:18 发布
阅读量7.2k 收藏 9
点赞数 1
分类专栏： HTML 文章标签： 盒子阴影
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20497071/article/details/94291605
版权 
/*盒子阴影*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子阴影效果</title>
</head>
<style>
	div{
		width:200px;
		height:200px;
		border:1px solid green;
		transition:all 1s;
		}
		div:hover{
			box-shadow:2px 2px 20px 2px rgba(0,0,0,0.3);
			}
</style>
<body>
<div>
	<a href="#">文字内容</a>
	<a href="#">文字内容</a>
    <a href="#">文字内容</a>
    <a href="#">文字内容</a>
    </div>
</body>
</html>

 

我的哥哥呦
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery实现div阴影效果示例代码
10-26
div阴影效果在以前都是采用图片来实现的，而在本文大家将学会使用jquery来实现，感兴趣的朋友可以参考下
HTML盒子圆角阴影和定位
MCdongchao的博客
05-16 2270
盒子阴影 box-shadow 设置元素的阴影效果，不会影响到页面的布局 参数： 1:水平偏移量 可正可负 必填 2:垂直偏移量 可正可负 比填 3:模糊半径 可填 4:颜色 一般用rgba div｛ box-shadow: 3px 3px 5px rgba( 0,0,0,.5);｝ p｛box-shadow: -3px -3px 5px rgba( 0,0,0,.5);｝ 圆角 border-radius: 设置圆角 可设四个值 从左上角开始顺时针排列 border-ra
【CSS】盒子模型如何设置阴影
最新发布
2301_80073533的博客
03-23 379
只用修改变第二个属性值。只需修改第一个值即可。只用改变第一个属性值。
盒子阴影(box-shadow)和文字阴影（text-shadow）
yizhichen_xuyuan的博客
06-18 2609
盒子阴影(box-shadow)和文字阴影（text-shadow）
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 866
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
盒子阴影和文字阴影
JJ_Smilewang的博客
04-10 4069
1.盒子阴影 在CSS3中，我们可以使用 box-shadow 属性为盒子添加阴影。 1.1 语法 box-shadow: inset h-shadow v-shadow blur-radius color; /* inset 表示阴影类型为内阴影 */ /* outset 表示阴影类型为外阴影 （不添加时默认为外阴影，但是添加后反而无效 故想表示外阴影时不添加即可）*/ /* h-shadow 表示阴影水平位移量 可以为负值*/ /* v-shadow 表示阴影垂直位移量 可以为负值*/ .
几点CSS技巧
生活在别处
03-19 415
文章目录Div展示右下阴影（悬浮效果）Div为圆角矩形Div的背景图进行拉伸Div位于在两个元素交界之处 Div展示右下阴影（悬浮效果） // 前2个参数是阴影偏移坐标，例如-1,-1表示阴影向左上偏移 // 第3个参数是阴影宽度 // 第4个参数是阴影颜色 boxShadow: '1px 1px 2px #aaaaaa' Div为圆角矩形 // 参数表示圆角的大小 border-radius: 5px Div的背景图进行拉伸 background-image: url('bg.png') backgr
CSS系列之盒子阴影box-shadow（CSS3）
热门推荐
老__L的博客
01-30 2万+
本文主要介绍CSS的box-shadow属性。盒子阴影box-shadow（CSS3）
使用css设置div块实现阴影呈现3d效果
夕阳无限好
05-29 1万+
       最近闲来无聊，突然想着，自己在项目中，有的时候会需要一些稍微炫酷点的界面实现，然后当时也都是为了把效果实现，然后也没有认真的去研究学习，所以很多时候都是这个任务完成了，也就完成了。没有把相应的知识点给认真研究学习和巩固。        前几天项目中用到的一个就是要实现界面的某个模块呈现阴影，这样给人有种3d的感觉，然后当时主要用到的点其实就一个：box-shadow，这个css...
如何实现Div的内部阴影与外部阴影
qq_53964091的博客
09-13 8322
div进行内外阴影设置
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝好...
精通CSS.DIV.网页样式与布局 源码
09-10
　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的版式 　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...
精通CSS+DIV网页样式与布局视频教材
12-25
10.5　定位实例二：文字阴影效果 第11章　CSS+div布局方法剖析 11.1　CSS排版观念 11.1.1　将页面用div分块 11.1.2　设计各块的位置 11.1.3　用CSS定位 11.2　固定宽度且居中的版式 11.2.1　方法一 ...
如何将对象转换成数组
娓娓道来
01-07 8175
var List=new Array; //声明对象 var Json={"keys": "201604070588,201852635298"}; //将对象中的逗号去掉 List=Json['keys'].split(','); //即成为数组形式 console.log(List); //检测目前是否为数组形式 console.log(List instanceof Array); ...
固定定位（fixed）
娓娓道来
06-30 6844
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ } div{ width: 200px; height: 200px; backg...
layui的数据表格展开
娓娓道来
12-25 6006
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum...
layui实现展开行效果
娓娓道来
12-26 4904
Table:JS: function GetListDouble() { layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'jquery'], function() { var table = layui.table; var element ...
boder设置div盒子阴影
05-24
你可以通过 CSS 的 box-shadow 属性来设置 div 盒子的阴影。示例代码如下： ```css div { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } ``` 其中，box-shadow 属性的四个参数分别为： - 水平偏移量：表示阴影的水平位置，可以是负值（表示阴影在元素左侧）。 - 垂直偏移量：表示阴影的垂直位置，可以是负值（表示阴影在元素上方）。 - 模糊度：表示阴影的模糊程度，值越大越模糊。 - 颜色：表示阴影的颜色，可以是具体的颜色值，也可以使用 rgba() 函数来设置透明度。 你可以根据自己的需求调整这些参数来实现不同的阴影效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值