box-shadow - web秀

#box-shadow#

共找到 box-shadow 相关内容 12 条

6年前

CSS实现多重边框的5种方式

CSS实现多重边框的5种方式

前言目前最优雅地实现多重边框的方案是利用CSS3的box-shadow属性，但如果要兼容老的浏览器，则需要选择其他的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。利用描边(outline)属性方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外的浏览器。.borders{border:solid6px#fff;outline:solid6px#888;}优缺点：只能实现双重边框边

559487 3294 0

5年前

CSS3 box-shadow实现背景动画

CSS3 box-shadow实现背景动画

前言语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;box-shadow，向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。参数说明：值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅CSS颜色值。inset可选。将外部阴

556617 3773 0

5年前

从浅到深的学习 CSS3阴影(box-shadow)

从浅到深的学习 CSS3阴影(box-shadow)

前言前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。没有看过之前文章的小伙伴请点击：《CSS3box-shadow实现背景动画》《CSS3动画解析抖音LOGO制作》下面我们从最基础的开始演示。单侧投影知识点:1、外box-shadow前四个参数：x偏移值、y偏移值、模糊半径、扩张半径。2、单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他

555423 3757 0

5年前

利用CSS线性渐变、阴影、缩放实现动画下雨效果

利用CSS线性渐变、阴影、缩放实现动画下雨效果

前言好雨知时节，当春乃发生。随风潜入夜，润物细无声。春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣他一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。下面进入主题，看下图：这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。如果文章中有不懂的知识点，请点击文章最下方，推荐文章哦动画解析很明显这个动画效果，是上中下结构，所以我们分3部分实现。1、云：由多个圆拼接而成，并且有上下浮动的动画效果2、雨滴：多个，从上而

558734 3903 0

4年前

圣诞快乐：纯CSS绘制圣诞老人头像

圣诞快乐：纯CSS绘制圣诞老人头像

前言圣诞来临前夕，为小伙伴们加更一个有趣的CSS3效果，CSS3圣诞老人，同时祝大家圣诞快乐。也预示这2019接近尾声，还有心愿和目标没有实现的要加油哦。下面看看示例图：图例解析看了上图，我们先分解一下图形，一步一步实现1、整个头像用一个圆形包裹2、头像分为上下两部分，头和身体3、头有分为帽子，脸部，胡子，耳朵；身体上还有扣子4、脸上有眼睛，鼻子，嘴巴ok，分解细致后，我们就把大致的结构画出来，动画先忽略。html结构分解身体部分<divclass="window"><divclass=

553446 3692 0

4年前

CSS爱心：把你的心我的心串一串

CSS爱心：把你的心我的心串一串

前面几个小节都要提到Box-Shadow，这个小节让我们来真正感受它的强大吧。话不多说，直接看图：这个扑通扑通跳动的心，就是Box-Shadow制作的。如果你看过前面小节《CSS3Box-ShadowLoading，创造无限可能》，应该看到这个效果，就可以自己动手做了。下面我们一起动手试试吧绘制心形<divclass="heart"></div>css.heart{font-size:30px;width:1em;height:1em;color:red;background-co

552923 3599 2

4年前

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

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

Box-Shadow通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，多层阴影，制作一些非常有趣的动画。box-shadow:h-shadowv-shadowblurspreadcolorinset;属性值描述h-shadow指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边v-shadow指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部blur阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模

555220 3678 0

4年前

CSS 3D世界，3D 透视照片墙

CSS 3D世界，3D 透视照片墙

有了前面2章内容，大家应该对CSS3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo，装六个面<divclass="photo"><divclass="example"></div><divclass="example"></div><divclass="example"></di

547517 3381 0

4年前

CSS简笔画：纯CSS绘制一艘邮轮

CSS简笔画：纯CSS绘制一艘邮轮

本节你能get到什么前端知识1、CSS变量2、CSS伪类的灵活使用3、CSS绘制梯形、箭头、转发箭头4、CSS相对定位和绝对定位5、CSStransform变形6、CSSbox-shadow7、CSSFlex布局看图解构1、梯形船体2、中间部分有一个镂空的梯形3、船体上有船名、船锚4、甲板上有护栏5、船上有货物6、还有一根旗杆解构后发现东西并不多！梯形船体<divclass="ship"><divclass="ship-body"></div></div>:

546171 3317 0

4年前

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

本节你能get到什么前端知识1、CSSFlex垂直居中对齐2、CSSclip剪裁3、CSSbox-shadow多阴影看图解构看图很简单咯，AdidasLogo就是用3个“梭形”组成，然后添加3条和底色一样颜色的线覆盖在上面即可。什么是“梭形”？船大家都见过吧，它就是“梭形”形状的，类似于“菱形”，但是“梭形”两头都是圆圆的，不是尖尖的角。生活中，还有很多花瓣也都是“梭形”的。logo底图<divid="adidas"><divclass="logo"></div><

547704 3308 0

下拉加载更多