四种方法 1. Border Radius .circle { background: #456BD9; border: 0.1875em solid #0F1C3F; border-radius: 50%; box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, ...
分类：
Web程序 时间：
2020-02-10 10:12:46
阅读次数：
138
在日常开发中会使用带箭头的弹出对话框，有时为了美观或者突出，会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的，这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性，filter下的drop-shadow。<divclass="triangle"></div>.triangle{width:200px;height:60px;position:rel
分类：
Web程序 时间：
2020-01-18 01:31:49
阅读次数：
160
1.box-shadow属性除了常用于阴影效果、卡片等基础使用外，还可以用于实现比较炫酷的特效； 类似这样的想过都是可以通过box-shadow属性制作的；资料来源于CSDN：很小白的小白 附上他的代码， <!DOCTYPE html> <html lang="en"> <head> <meta c ...
分类：
Web程序 时间：
2019-12-31 18:55:34
阅读次数：
202
语法: ~~~css box shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； ~~~ 前两个属性是必须写的，其余的可以省略。 h shadow：值为正数时，阴影往右移动，反之，往左移动。 v shadow：值为正数时，阴影往下移动，反之，往上移动。 ...
分类：
Web程序 时间：
2019-12-31 18:37:12
阅读次数：
73
喜欢内容的同学记得添加小渡微信：duyi4299聊聊最新前端内容哦！
分类：
其他好文 时间：
2019-12-24 10:16:01
阅读次数：
276
1、语法 box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 从外层的阴影（开始时）改变阴影内侧阴影; 2、参数值说明 1）h-shadow：必需。水平阴影的位置。允许 ...
分类：
Web程序 时间：
2019-12-19 15:48:08
阅读次数：
446
边框 border-radius:圆角 box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 盒阴影tet-shadow:h-shadow v-shadow bur clor border-image:边界图片 背景 background-size:背景图片的尺寸 background-o ...
分类：
Web程序 时间：
2019-12-09 12:09:11
阅读次数：
101
一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是总有一些需求是那么的特别，例如下图： 要求给这样的梯形盒外围加阴影，第一眼感觉也没啥特别的，但是搞起来就知道多烦了。反正我是折腾了好一会 ...
分类：
Web程序 时间：
2019-12-01 17:20:37
阅读次数：
96
2016年2月26日个人博客文章--迁移到segmentfault （1）text-shadow(文本阴影) 在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果： 没错文本的阴影的效果很强大，接下来我们就一起开始学习吧. 语法：text-shadow：none | ...
分类：
Web程序 时间：
2019-12-01 11:36:39
阅读次数：
97
方法一： 代码-1： 缺点： 需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。 方法二： 伪元素方案 代码-2： 优点： 相对灵活，可一满足绝大多数人对遮盖层的期望。 缺点： 方法三：box-shadow方案代码-3： 1 上面的代码片段中第四个参数' 999px '是扩张参数， ...
分类：
其他好文 时间：
2019-11-29 18:14:57
阅读次数：
97
