来看下css边框阴影怎么设置？这些方法掌握后工作更轻松

jiedinghui 2020-05-14

我们在网页设计中，通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影，下面本篇文章来给大家介绍一下。

在css中，我们可以通过box-shadow属性来设置边框阴影。

box-shadow属性可以向边框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：

h-shadow：必需设置的值，定义水平阴影的位置。允许负值。
v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
blur：可选设置的值，定义模糊距离。
spread：可选设置的值，定义阴影的尺寸。
color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。
inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

css3边框阴影代码示例如下：

1、box-shadow属性实现边框外阴影

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS3边框阴影</title>
   <style type="text/css">
      *{margin: 0px;padding: 0px;}
      div{margin: 20px 0px;
         width: 100%;
         height: 40px;
         background: #fff;
      box-shadow:5px 5px 10px 5px #ccc;
      }
   </style>
</head>
<body>
  <div></div>
</body>
</html>

此段HTML代码中，我们给div添加了一个box-shadow的样式属性，并且参数分别设置为5px 5px 10px 5px #ccc。

说明：由于没有设置inset（内阴影）参数，默认为外阴影。

2、box-shadow属性实现边框内阴影

在上述HTML代码的基础上，我们将box-shadow样式属性的值进行一些变化：

box-shadow:5px 5px 10px 5px #ccc inset;

3、box-shadow属性实现圆柱形效果

box-shadow:0px 5px 10px 10px #ccc inset;

这里我们将水平方向阴影位置设置为0个像素点并且设置内阴影。

注：box-shadow属性中，前两个参数可以为负值并且是必须存在，而后面的参数则都是可选的。

: jiedinghui

相关推荐

css实现div多边框_box-shadow模拟多边框、outline描边实现

在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径

SuiKaSan的自学室 0喜欢 / 0评论 2020-06-13

纯CSS实现放烟花效果

// 40upx -30upx 0 #FF7F50, 70upx -10upx 0 #00FFFF, 130upx -20upx 0 #9932CC, 230upx 0 0 #00FFFF,//

沈宫新 0喜欢 / 0评论 2020-06-11

scss

mixin 混合未知格式和数量的变量, 使用...@each $animal in puma, sea-slug, egret, salamander {

jiangfulai 0喜欢 / 0评论 2020-04-11

CSS实现一个粒子动效的按钮

按钮可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦，这里尝试一下CSS的实现方式。抛开js方案，还有HTML和CSS实

jiedinghui 0喜欢 / 0评论 2020-02-02

CSS中使用文本阴影与元素阴影

在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、、阴影颜色。Copytext-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;box-shadow属性

葉無聞 0喜欢 / 0评论 2020-01-18

详解box-shadow

今天我们来探究一下“阴影”。　　box-shadow直译被称为“盒子阴影”，直译的结果与同学们的认知是相符的。　　box-shadow属性值由6部分组成。值为0意味着阴影完全不模糊。不允许负值，负值等同于0。　　3.spread　　spread表示阴影的大

zengni 0喜欢 / 0评论 2019-12-24

自己用过的一些比较有用的css3新属性

css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开始慢慢的去了解并使用css3，因为我觉得这是一种趋势，它是一种已经被制定的标准。我并不是专门在做前端的，只是有时不得不自己去写这些东西，有时喜欢研究研究这些，所

ozhanjun 0喜欢 / 0评论 2013-09-11

box-shadow的用法

css3新增了好多属性，三年前学习过但是不怎么使用感觉自己又不会用它了，今天学习顺便分享出来供大家一起学习。box-shadow属性向框添加一个或多个阴影；该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键

CaiKanXP 0喜欢 / 0评论 2019-10-20

兼容Ie阴影效果的CSS

<li onmousemove="$(this).addClass('shadow')" onmouseout="$(this).removeClass('shadow')">

sorryericsson 0喜欢 / 0评论 2014-06-27

纯CSS实现3D按钮效果

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。css代码非常少，如下所示。font-family: "Microsoft YaHei&qu

王景迁 0喜欢 / 0评论 2016-12-20

CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个

淡风wisdon大大 0喜欢 / 0评论 2019-08-01

css开发技巧

谈及圆角小编曾在各种讨论中频繁听见：实现麻烦、兼容困难、性能不佳等等缺点。而如今的Web设计需要的就是各种各样新的开发技巧，因此越来越多的前端和页面都开始使用HTML5。对于HTML5而言，从前必须使用图片来实现的需求，现在都可以通过代码来实现。而CSS3

懵懂听风雨 0喜欢 / 0评论 2013-08-26

《CSS揭秘》-背景与边框

值描述border-box背景被裁剪到边框盒padding-box背景被裁剪到内边距框content-box背景被裁剪到内容框border: 20px solid hsla;支持逗号分割语法，我们可以创建任意数量的投影。box-shadow是层层叠加的，第

Alisa0 0喜欢 / 0评论 2019-06-30

【译】只用 CSS 就能做到的像素画/像素动画

虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。上面的马里奥和 Minecraft 方块都没有使用 JavaScript，单纯使用 CSS 动画制作。关于 box-shadow 属性绘制像素点可以借助 box-sh

hjfbluesky 0喜欢 / 0评论 2019-06-29

你所不知道的 CSS 阴影技巧与细节

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，

LadyZhong 0喜欢 / 0评论 2019-06-28

前端 CSS : 2# 纯 CSS 实现多彩的 Buttons(box-shadow)

已经有了 100+ 的练习, 但这种练习并非刻意针对自己薄弱的问题, 而且对于一些概念还处于 -- "哦, 啊哈, 我懂了" 这种自欺欺人的状态

武林半侠 0喜欢 / 0评论 2019-06-28

纯CSS实现3D按钮效果

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。css代码非常少，如下所示。font-family: "Microsoft YaHei&qu

移云居客 0喜欢 / 0评论 2016-12-20

LESS vs SASS？选择哪种CSS样式编程语言?

你可能已经被关于应该用Sass还是用LESS的争论折磨死了。直到最近我发现了Sass和Compass的。Sass是下一代的，对有经验的前端工程师来说是很有用的工具。为什么Sass比LESS要好Sass有很多可用的方法和逻辑。Sass用户可以使用功能强大的C

LiybSunshine 0喜欢 / 0评论 2016-07-26

css3 (二) 手册 01

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];- 阴影模糊半径：此参数可选，其值-只能是为正值-，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；- 阴影扩展半径：此参数

Phoebe的学习天地 0喜欢 / 0评论 2019-06-28

IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */. -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */. beha

王为仁 0喜欢 / 0评论 2015-06-09

css样式

居中布局中居中是很重要的技术，掌握居中的技巧，对布局相当重要，input1.去除外边框：outline : none2.去除内边距：padding : 03.去除type="number"类型的上下自旋按钮：。box-shadowbo

nicepainkiller 0喜欢 / 0评论 2019-06-27

使用box-shadow进行画图(性能优化终结者)

最近突然想做一些好玩的东西，找来找去，想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来感觉这个挺有意思，正好趁着周末，自己也搞一波前言在线地址：优化前的版本优化后的版本源码仓库地址。喜欢听电脑引擎声的除外。首先，并不打算

81951932 0喜欢 / 0评论 2019-06-27

使用CSS画个图标

CSS绘制图标（一）我们使用单个标签绘制一个文件的图标。HTML内容很简单，就一句话。<div id="doc"></div>右上角折叠三角采用after伪元素实现，左下角文字使用before伪元素实现。主体部分

yaodilu 0喜欢 / 0评论 2019-06-27

CSS预编译语言Less的用法总结

扩展了css语言，增加了变量、继承、嵌套、运算、函数等特性，使css更易维护和扩展。Less既可以在浏览器端上运行，也可以在Node服务器端运行。与CSS能够很好地融合使用。-- 在引入less.js之前配置参数项 -->

impress 0喜欢 / 0评论 2019-06-27

css box-shadow 產生陰影效果或光暈效果的特性

可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。更具意義的是，產生的陰影不會對版面編排造成影響。標準語法box-shadow: x y blur spread color inset;說明共有 6 個特性值，每個值之間以

aSuncat 0喜欢 / 0评论 2014-08-29

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radi

沉着前进 0喜欢 / 0评论 2014-07-21

一些上流的CSS3图片样式

不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的

hjfbluesky 0喜欢 / 0评论 2014-03-18

css3 box-shadow投影发光效果

可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。别急，我们将在文章最后会介绍一些针对IE的Hac

昔人已老 0喜欢 / 0评论 2014-01-05

css揭秘笔记——用户体验

选用合适的鼠标光标css3提供了一大批内建光标其中某些光标很突出，因为只需要花费极少的代码，就可以迅速地提升大量网页应用的可用性。比如禁用，比如，公共触摸屏中隐藏光标，可以直接使用cursor:none搞定，而不需要额外的透明图片。扩大可点击区域将点击区域

yezi 0喜欢 / 0评论 2019-06-26

css揭秘笔记——视觉效果

在元素正下方的投影被裁切掉了，是没有的；而text-shadow不同，文字下方的投影不会被裁切。box-shadow的第三个参数是模糊半径，假如设置4px，则投影尺寸比元素本身大8px.box-shadow第四个参数是扩张半径，指定整数是扩大，负数为缩小。

realitycss 0喜欢 / 0评论 2019-06-25

简单CSS3实现炫酷读者墙

使用基础的Html和CSS写出雏形需要一提的是头像的排版。给外面a标签padding-left:;，img自身float:left;margin-left:;，这种写法避免了不少因浮动产生的问题，且代码简明，推荐适当的使用此方法。使用并解说所用CSS3接下

Phoebe的学习天地 0喜欢 / 0评论 2013-07-02

编码规范系列：css规范

为选择器分组时，将单独的选择器单独放在一行。声明块的右花括号应当单独成行。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。为选择器中的属性添加双引号，例如，input[

gigipop 0喜欢 / 0评论 2019-06-25

html+CSS制作照片墙

今天看到一个比较漂亮的照片墙，所以就跟学做了一个。只涉及到了CSS，很简单。在CSS中用到了2中CSS3中的技术，box-shadow，border-radius。

gigipop 0喜欢 / 0评论 2013-05-09

css边框与背景

默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip 属性来调整。设置为padding-box，背景不会透过边框所在的范围，览器就会用内边距的外沿来把背景裁切掉。实现的办法入下： box-shadow的方式它支持逗号分隔语法，

yezi 0喜欢 / 0评论 2019-06-21

box-shadow

CSS3中的box-shadow属性被用来添加阴影box-shadow:inset x-offset y-offset blur-radius spread-radius color投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色

wangnantjobj 0喜欢 / 0评论 2019-06-21

2016百度前端技术学院Task02

起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。这个专栏将持续更新。作为一个刚刚入门不久，正在摸爬滚打中的学习者，我明白动手写项目的重要性和意义。记录，记忆，练习，整理，学习的不二法门，

xiaoshe 0喜欢 / 0评论 2019-06-21

less入门初体验

}编译1、客户端(浏览器)通过在源代码中引入less.js文件，用于实时对.less样式表文件进行编译注意:你的less样式文件一定要在引入less.js前先引入，并且需要设置rel属性值为stylesheet/less. <script src=&

libowen0 0喜欢 / 0评论 2019-06-21

box-shadow

Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。Safari和Chrome通过私有属性-webkit-box-shadow支持。别急，我们将在文章最后会介绍

impress 0喜欢 / 0评论 2012-09-12

使用CSS3生成简单的box影子

<title>Creating a simple box shadow on a container using CSS3</title>. <p>Lorem ipsum dolor sit amet, consecte

aSuncat 0喜欢 / 0评论 2012-04-28

CSS实现跨浏览器兼容性的盒阴影效果

在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。好在IE浏览器有个IEshadow滤镜，是IE浏览器私有

notepaper 0喜欢 / 0评论 2012-04-01

css3 box-shadow投影发光效果

Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。Safari和Chrome通过私有属性-webkit-box-shadow支持。别急，我们将在文章最后会介绍

buttonChan 0喜欢 / 0评论 2012-03-28

10 个实验性的 JS/CSS3 编程技术

10 个实验性的 JS/CSS3 编程技术本文所介绍的编程技术，可以有效地改善用户体验和设计师的工作流程，替代原先在IE6上使用的旧的解决办法。需要注意的是，下面列出的大部分技术还在实验阶段，而且有些不是纯CSS技术。但本文还是非常值得一看。让我告别ove

lanzhusiyu 0喜欢 / 0评论 2011-12-15

介绍 10 个 CSS3 属性

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个

CoderChang 0喜欢 / 0评论 2011-12-14

CSS3——框阴影(Box Shadow)

-webkit-box-shadow: 0px 0px 4px 3px #b335b3;-moz-box-shadow: 0px 0px 4px 3px #b335b3;-webkit-box-shadow: inset 0px 0px 30px 30px

css教程 0喜欢 / 0评论 2011-08-18

div 边框阴影

box-shadow:阴影水平偏移值；阴影垂直偏移值；阴影模糊值；阴影颜色；Firefox支持BoxShadow(阴影)：-moz-box-shadow:2px2px5px#333333；注意：css1中支持box-shadow，css2中去掉了对其的支持

沉着前进 0喜欢 / 0评论 2011-08-18

css3阴影属性box-shadow

box-shadow:阴影水平偏移值；阴影垂直偏移值；阴影模糊值；阴影颜色；webkit内核的Safari和Chrome支持BoxShadow(阴影)：-webkit-box-shadow:2px2px5px#333333；同一个元素可以使用多个阴影，bo

JenniferMuMu 0喜欢 / 0评论 2011-08-17

CSS3新特性

border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;text-shadow:x-offsety-offsetblurcolor;例：text-shadow:2px3px

icewizardry 0喜欢 / 0评论 2011-05-12

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。我们不得不在每个角落使用不同的图像。border-image属性允许你指定一个图片作为边框！-webkit-border-image:url 30 30 r

尚衍亮 0喜欢 / 0评论 2016-12-20

webpack 样式加载的实现原理

npm install css-loader style-loader --save-dev2.修改webpack.config.js增加一个一级子节点。},test的正则会匹配.css的文件。use中的执行顺序是从右到左。loader的执行是连续的，就像

王福朋 0喜欢 / 0评论 2018-06-12