我们在网页设计中，通常会使用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: %;

          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属性中，前两个参数可以为负值并且是必须存在，而后面的参数则都是可选的。

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

  1. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  2. HTML CSS边框阴影的实现

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...

  3. css边框阴影

    <style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...

  4. css边框阴影问题

    阴影落在下方:box-shadow: 0 3px 5px rgba(0, 0, 0, .2); 阴影落在四周:box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 0 ...

  5. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  7. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  9. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

随机推荐

  1. Java实现子序列问题

    一个串的子串是指该串的一个连续的局部.如果不要求连续,则可称为它的子序列. 比如对串: "abcdefg" 而言,"ab","abd",&q ...

  2. java中Condition类的详细介绍（详解）

    已找不到原文了,还望原文博主看到能告诉小白一下,一定标注原文地址 一 condition 介绍及demo Condition是在java 1.5中才出现的,它用来替代传统的Object的wait(). ...

  3. Java实现第十届蓝桥杯旋转

    试题 F: 旋转 时间限制: 1.0s 内存限制: 512.0MB 本题总分:15 分 [问题描述] 图片旋转是对图片最简单的处理方式之一,在本题中,你需要对图片顺时 针旋转 90 度. 我们用一个 ...

  4. Linux 文件特殊权限-SetUID

    SetUID非常类似于Windows中以管理员身份来运行文件,针对的是可执行文件,而且命令执行者要拥有对这个文件的执行权限,只在文件执行的过程中变换身份,最常见的passwd命令就具有SetUID权限 ...

  5. cocos2dx Android 使用ant 批量打包

    参考文章: 例子:http://www.2cto.com/kf/201305/208139.html http://blog.csdn.net/ljb_blog/article/details/127 ...

  6. el-upload配合vue-cropper实现上传图片前裁剪

    需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像. 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数. 裁 ...

  7. 【雕爷学编程】MicroPython动手做（08）——零基础学MaixPy之识别颜色

    早上用百度搜了一下“颜色识别”,多少有了一点大致的概念,还是老办法,动手做,多实验,往前走,还请各位老师多多指点. OpenCV(百度百科)是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运 ...

  8. windows server2012在已有.net4.5框架的基础上安装.net3.5的方法

    我们在一台服务器运行各种程序的时候难免会用到一些好用的但是很老的软件.老软件也就难免需要以前的那种环境来运行,但是老的环境与新的环境往往不兼容.下面我就来讲一讲系统在已有.net4.5的情况下怎么安装 ...

  9. Centos7快速安装RocketMQ

    1. 为什么要用MQ 消息队列是一种"先进先出"的数据结构 其应用场景主要包含以下3个方面 应用解耦 系统的耦合性越高,容错性就越低.以电商应用为例,用户创建订单后,如果耦合调用库 ...

  10. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...