css3阴影box-shadow 曲边阴影 翘边阴影 折叠阴影

最新推荐文章于 2024-04-08 23:51:29 发布
最新推荐文章于 2024-04-08 23:51:29 发布
阅读量1k 收藏 3
点赞数
分类专栏： 前端 样式

了解box-shadow 转载自 css3 box-shadow

案例转载自 曲边阴影 翘边阴影

学习css3 skew 转载自 transform skew() 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阴影测试</title>
		<style type="text/css">
			div{
				text-align: center;
				height: 200px;
				width: 500px;
				line-height: 200px;
				/*一定要设置背景颜色，否则为透明的话 折叠的效果会看不出来！*/
				background-color: white;
				margin: 60px;
			}
			.box-shadow1{
				position: relative;
			    box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			}
			/*在元素后面插入新的内容，即插入副阴影*/
			/*伪类的用法*/
			.box-shadow1:after{
				height: 50px;
				width: 480px;
			    content:"";
			    position:absolute;
			    background:white;
			    bottom: 0px;
			    left: 10px;
			    right: 10px;
			    /*设置副阴影在主阴影的下面*/ 
			    z-index: -1;
			    box-shadow: 0 0 20px rgba(0,0,0,0.7); 
			    border-radius: 100px/10px;
			}
			
			.box-shadow2{
			    position:relative;
			    box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			}
			.box-shadow2:before,.box-shadow2:after{
			    content: "";
			    position:absolute; 
			    top:20px;
			    bottom: 22px;  
			    background: transparent; 
			    box-shadow: 0 8px 20px rgba(0,0,0,0.7);  
			     /*设置副阴影在主阴影的下面*/ 
			    z-index: -1; 
			    background: #fff; 
			}
			.box-shadow2:before{ 
			    left: 22px;  
			    right:12px; 
			    /*将副阴影进行倾斜和旋转*/
			    transform: skew(-12deg) rotate(-4deg); 
			}
			.box-shadow2:after{  
			    left: 12px;  
			    right:22px; 
			    /*将副阴影进行倾斜和旋转*/
			    transform: skew(12deg) rotate(5deg); 
			}
		</style>
	</head>
	<body>
		<div class="box-shadow1">曲边阴影</div>		
		<div class="box-shadow2">翘边阴影</div>		
	</body>
</html>

效果图

weixin_zsh
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3阴影 box-shadow的使用和技巧总结
09-24
主要介绍了详解CSS3阴影 box-shadow的使用和技巧总结 ,具有一定的参考价值，有需要的可以了解一下。
css box-shadow实现曲边阴影与翘边阴影
09-24
主要介绍了css box-shadow实现曲边阴影与翘边阴影,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 阴影技巧
qq_52848404的博客
03-24 509
在上述示例中， element 元素将具有水平偏移量为 2 像素、垂直偏移量为 2 像素、模糊半径为 2像素、颜色为黑色（rgba(0, 0, 0, 0.5)）的阴影效果。语法： box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;语法： filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
CSS设置阴影样式大全 包含所有样式 有图有代码
乐逍遥
10-15 3693
常用的样式： 下面还有特殊的效果 <html> <head> <title></title> <style type="text/css"> /*<!-- ———————————— 最简单的常规效果 —————————————————————— -->*/ .flex{display:flex;flex-wrap:wrap;} .flex-item{margin-right:30px;} .box { .
一文读懂CSS中的阴影：box-shadow，text-shadow，drop-shadow的区别与使用方式
最新发布
qq_45820271的博客
04-08 1689
本文介绍了在CSS中设置阴影的三种方式，介绍了box-shadow，text-shdow，drop-shadow以及它们的使用方式
css实现单侧阴影
qq_41910413的博客
05-07 995
box-shadow实现单侧阴影效果： .top { box-shadow: 0px -10px 10px -10px rgba(18, 21, 38, 0.3); } .right { box-shadow: 10px 0 10px -10px rgba(18, 21, 38, 0.3); } .bottom { box-shadow: 0 10px 10px -10px rgba(18, 21, 38, 0.3); } .left { box-shadow: -10px 0 1
box-shadow 添加阴影效果、四周阴影
Yt0601的博客
01-04 1971
box-shadow 添加阴影效果详细解释+代码、四周阴影
CSS 样式实现单边阴影
love_czz的博客
08-20 2799
CSS 中有一个用于实现边框的阴影的属性 box-shadow。 如果要实现单边阴影对 box-shadow属性值需要进行特别的设定，才可以到达效果。 **.shadow-only-bottom{ box-shadow: 0px 7px 7px -7px #5E5E5E; }** .shadow-only-right{ box-shadow: 7px 0px 7px -7px #5E5E5E; } .shadow-only-left{ box-shadow: -7px 0px 7px -7px #5E5
详解CSS3的box-shadow属性制作边框阴影效果的方法
09-24
主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
html怎么做三边阴影,css3制作翘边阴影
weixin_39627405的博客
06-26 345
css3制作翘边阴影css3制作翘边阴影利用after和before伪类，设置class属性transform: skew(12deg) rotate(4deg) 弄成左右相反的2个菱形 ；层级低于本身作为阴影html代码如下：css3制作翘边阴影css代码如下：.ilist {width: 690px;margin: 30px auto;}.ilist li {position: relativ...
前端开发_HTML5_CSS部分-阴影(shadow)
u013185175的博客
12-18 9361
阴影(shadow) 1.引入 我们接下来学习一种比较特殊的样式特效——阴影。 2.阴影(shadow) (1)、概述:所谓的阴影就是我们日常生活中缩减到的一种特殊的影子效果。 (2)、阴影分类:阴影大概可以分为:文字阴影(text-shadow)、盒子阴影(box-shadow)。 3.文字阴影(text-shadow) (1)、文字阴影是正对文字产生的一种特效。 (2)、文字阴影相关的语法以参数说明 文字阴影语法以及相关属性: text-shadow:h-...
项目总结(css3中的阴影效果)
热门推荐
时清云的博客
08-20 2万+
以前用的很少，没有仔细去了解过这一块，所以对于阴影和动画只是实现一些简单的需求。所以趁这次项目需求结合实践就去好好总结一下这一块。
【css】box-shadow 单双边阴影
z767327552的专栏
04-09 3814
box shadow 单边阴影 两边阴影 box-shadow语法：x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect，其中阴影半径可以为负值，意思是增加或减少指定数值的阴影半径 正常阴影 box-shadow: 5px 5px 5px black;  阴影半径为负值  box-shadow: 5px 5px 5px -5px black; 阴影半
box-shadow 制作单边阴影效果,不影响其它边的效果
u010289111的专栏
11-15 1万+
以前在使用box-shadow制作单边阴影效果的时候发现或多或少会影响其它边的展示效果. 今天在阅读文章的时候,终于发现了一个解决的方法. 就是利用box-shadow中的一个参数.spread来解决这个问题. 首先我们先要区分 box-shadow:0 10px 10px #ccc; box-shadow:0 10px 10px -10px #ccc; 首先,我们应当认知到这两种书写
html怎么做出折叠阴影效果,CSS阴影效果(Box-shadow)用法趣味讲解
weixin_42304618的博客
05-31 322
使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法box-shadow:2px 2px 5px #000;box-shadow:0px 0px 10px #000;内阴影box-shadow:inset 2px ...
CSS3之------box-shadow属性使用方法（1），即单边阴影效果设置
x619y的专栏
09-01 5146
《图解CSS3：核心技术与案例实战》第3章CSS3边框，本章主要介绍CSS3新增的边框特性，首先从CSS的border属性着手切入，分别介绍了CSS3新增边框特性，border-color、border-image、border-radius以及box-shadow。详细介绍了每个特性的语法规则，并且结合一些简单的案例，以图解的方式介绍了这些特性的具体使用方法以及在IE下相应的兼容和处理方式。本节
css3边框阴影详解
macangyewangs的博客
07-27 386
https://www.cnblogs.com/nyw1983/p/11348568.html
CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
weixin_34318326的博客
03-08 312
　　《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变（linear-gradient）的用法，今天本文介绍的盒阴影（box-shadow）是目前用得最多的 CSS3 特性之一。盒阴影效果和圆角效果一样都是做成图片，直接编写  CSS 代码就可以实现。 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的 CSS3 特性应用演示 35个让人...
css3图片阴影--曲线阴影/翘边阴影
TSeven37的博客
08-08 1214
  把box-shadow的x和y都设置为0，阴影从四边同时出现 设置box-shadow时注意浏览器兼容性 如果是正的 分别距离左边上面像素高度 一般不设置阴影的距离     1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径 2.设置盒子的宽高有两种方法第一种是直接设置width和height;第二种是设置position:absolut...
vue折叠面板可拖动样式
05-31
要实现可拖动的vue折叠面板，需要先引入一个支持拖动排序的库，例如`Sortable.js`，然后再结合CSS样式来实现。 这里提供一个示例代码，仅供参考： ```html <template> <div class="panel-group"> <div v-for="(item, index) in items" :key="item.id" class="panel" :data-id="index"> <div class="panel-heading" @click="toggle(index)"> {{ item.title }} </div> <div class="panel-collapse" :class="{ 'in': item.open }"> <div class="panel-body"> {{ item.content }} </div> </div> </div> </div> </template> <script> import Sortable from 'sortablejs' export default { data() { return { items: [ { id: 1, title: '折叠面板1', content: '折叠面板1的内容', open: false }, { id: 2, title: '折叠面板2', content: '折叠面板2的内容', open: false }, { id: 3, title: '折叠面板3', content: '折叠面板3的内容', open: false } ] } }, mounted() { // 初始化拖拽排序 const el = document.querySelector('.panel-group') Sortable.create(el, { animation: 150, handle: '.panel-heading', onEnd: evt => { const newIndex = evt.newIndex const oldIndex = evt.oldIndex const item = this.items.splice(oldIndex, 1)[0] this.items.splice(newIndex, 0, item) } }) }, methods: { toggle(index) { this.items[index].open = !this.items[index].open } } } </script> <style> .panel-group { margin-bottom: 20px; } .panel { margin-bottom: 0; border-radius: 0; border: none; box-shadow: none; } .panel-heading { cursor: pointer; background-color: #f5f5f5; } .panel-heading:hover { background-color: #ddd; } .panel-collapse { height: 0; overflow: hidden; transition: height 0.3s ease-out; } .panel-collapse.in { height: auto; overflow: visible; } .panel-body { padding: 15px; } </style> ``` 在这个示例中，我们使用了`Sortable.js`库来实现拖拽排序，然后在`mounted`钩子函数中初始化拖拽排序。同时，我们也定义了CSS样式来美化折叠面板的样式，包括折叠面板的背景色、边框、阴影、标题的样式等等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值