实现效果如图:

代码如下:

 .section {
margin: 20upx 30upx;
padding: 40upx;
border-radius: 6px;
border-top: #0670C4 solid 6px;
/* 主要是下面两行 */
background-color: #FFFFFF;
box-shadow: #808080 0px 0px 10px;
}

一个box四周边框阴影的更多相关文章

  1. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

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

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

  3. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  4. flex布局和边框阴影

    "妄"眼欲穿-CSS之flex布局和边框阴影 妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. flex布局 main axis:主轴:cross axis:交叉轴 ...

  5. CSS之flex布局和边框阴影

    flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction ​ 该属性决定主轴的 ...

  6. css边框阴影

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

  7. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

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

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

  9. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. ORA-00984: 列在此处不允许 SQL parse error location

      ORA-00984: 列在此处不允许SQL parse error location Oracle 插入数据的时候一直提示列在此处不允许.网上搜索答案说是类型不匹配的多,但我的错误确是一个低级错误 ...

  2. 前端表单提交数据~php获取表单内容

    上图代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. 利用微软RD Client APP远程连接PC(附外网连接方法)

    一.下载RD Client 这个就不用多说了... 二.设置PC允许远程桌面连接 PC系统以win10为例: 1.进入“远程设置”允许远程协助与远程桌面连接 桌面右键单击“此电脑”,属性,单击左边“远 ...

  4. 安装.net 服务时出现0x80131515错误的解决办法

    使用InstallUtil.exe安装一个用.NET写的Windows服务时,报错了,错误信息如下: Exception occurred while initializing the install ...

  5. vs2010直接调用av_register_all crash问题

    需要做一个视频导出的功能,通过ffmpeg来实现,vs2010里面引用ffmpeg库的 dll 和 lib 文件 第一步av_register_all就直接crash了, 查了近半天的时间,都快崩溃了 ...

  6. python科学计算包numpy用法(一)

    numpy是python中一个用来做科学计算的包,用起来十分方便,下面是我总结的numpy的用法: 1.如何创建矩阵 创建矩阵有很多种方法,主要包括以下几种: 通过array函数创建 >> ...

  7. 三、thymeleaf模板引擎构建前台html, 后台使用 ModelAndView 和 Model 模型

    项目源码:https://github.com/y369q369/springBoot.git      ->     thymeleaf 私聊QQ: 1486866853 1.pom.xml中 ...

  8. no module named win32api

    1 首先下载pywin32 https://sourceforge.net/projects/pywin32/files/pywin32/ 2进入虚拟环境 D:\env\jdscrapy\Lib\si ...

  9. django框架使用mysql报错,及两种解决方法

    1.django框架 settings.py文件中部分代码: DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3' ...

  10. (转)GraphicsMagick、命令行使用示例

    GraphicsMagick是从 ImageMagick 5.5.2 分支出来的,但是现在他变得更稳定和优秀,GM更小更容易安装.GM更有效率.GM的手册非常丰富GraphicsMagick的命令与I ...